如何在 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。

这让我发疯，因为这是我的要求的第一步，而这是被困住的第三周。我什至不知道从哪里开始。这是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库时会抛出错误。您可以在 Svelte 的onMount生命周期函数中使用动态导入，以便仅在客户端上导入该库。您必须对导入的任何 Web 组件执行此操作。

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

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

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