如何在 SvelteKit 中导入 Material Web 组件？

Question

我按照标准 tutorial in sveltkit 为基本模板创建了一个 Typescript 项目。

我npm install @material/mwc-button.

然后我简单地添加以下内容到routes/index.svelte

<script>
    import "@material/mwc-button";
</script>

我得到 SyntaxError: Cannot use import statement outside a module。

这让我发疯，因为这是我要求的第一步，这是卡住的第 3 周。我什至不知道从哪里开始。这是vite问题，sveltekit问题，mwc问题吗？任何建议都会很棒。

Answer 1

哇，那条错误信息毫无用处。在非 TS SvelteKit 项目中，你得到 Error when evaluating SSR module /node_modules/lit-html/lib/template-result.js: ReferenceError: window is not defined，这更清楚发生了什么。

导入 Material Web 组件运行使用 window 的代码，这在服务器上不可用。因此，Vite 在尝试处理导入的 mwc-button 库时抛出错误。您可以使用 dynamic import in Svelte's onMount 生命周期函数，以便仅在客户端导入该库。您必须对导入的任何 Web 组件执行此操作。

<script>
    import { onMount} from 'svelte';
    onMount(async () => {
        await import('@material/mwc-button');
    })
</script>

<mwc-button>Button</mwc-button>

如需进一步参考，请参阅“如何使用依赖于文档或 window 的仅客户端库？” SvelteKit FAQ.

中的问题

如何在 SvelteKit 中导入 Material Web 组件？

How do I import a Material Web Component in SvelteKit?

svelte

sveltekit