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

Question

我按照sveltkit 中的标准教程为基本模板创建了 Typescript 项目。

我想使用Material Web Component Button 。

我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 ，这对发生的事情更清楚一些。

导入材料 Web 组件运行使用window的代码，该代码在服务器上不可用。 因此，Vite 在尝试处理导入的mwc-button库时会抛出错误。 您可以在 Svelte 的onMount生命周期 function 中使用动态导入，以便仅在客户端上导入库。 您必须对您导入的任何 web 组件执行此操作。

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

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

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