moment hijri npm包在sapper中工作，但在svelte套件中不工作

Question

我有一个sapper项目，它已经完全准备好了。我正在尝试将工兵转换为最新版本的苗条套件。一切都很顺利。但现在hijri npm包工作savelte套件。

我需要将正常日期转换为回历日期。所以我用的是moment hijri。

当我试图从一刻起导入hijri时，它给了我错误。

+page.svelte:

<script>
import moment from "moment-hijri"
</script>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat quisquam, nisi itaque obcaecati earum debitis nemo voluptate, quasi placeat iusto reiciendis assumenda consectetur. Tempora iste explicabo debitis reprehenderit dolorem praesentium, incidunt doloremque optio ut, quas quibusdam illo saepe blanditiis iure dolore voluptas impedit soluta culpa vitae voluptatem similique. Aperiam labore ut laborum cupiditate repudiandae corporis saepe eaque, placeat ea magnam architecto dicta! Quia labore quo dolores, repellendus minus odio praesentium veniam laudantium quas mollitia explicabo asperiores! Velit reprehenderit sint soluta tenetur alias, amet sit voluptate quas repellat animi autem neque inventore ut dolore vero quae asperiores facilis id eaque nobis.</p>

浏览器：[https://i.stack.imgur.com/2tJHb.png]

软件包.json

{
"name": "my-app",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next",
"svelte": "^3.44.0",
"vite": "^3.1.0-beta.1"
},
"type": "module",
"dependencies": {
"moment-hijri": "^2.1.2",
"moment": "^2.29.1"
}
}

我该如何解决这个问题？有没有其他npm包可以将正常日期更改为回历日期？

Answer 1

moment-hijri很可能依赖于严格的客户端数据，因此诀窍是仅在代码执行客户端时导入它。这样做的一种方法是使用动态导入(相关的REPL(并在onMount(只在客户端运行(中安装moment-hijri，如下所示：

<script lang="ts">
import { onMount } from 'svelte';
onMount(async () => {
const moment = (await import('moment-hijri')).default;
// Rest of your code  
})
</script>

还有一种方法可以告诉SvelteKit，通过在页面选项中添加以下内容，使您的页面严格为客户端(文档(：

export const ssr = false;

然而，在大多数情况下，这并不是真正的建议，所以要小心使用。