2

我按照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 问题吗？任何建议都会很棒。

4

1 回答 1

2

哇，该错误消息非常无用。在非 TS SvelteKit 项目中，您会得到Error when evaluating SSR module /node_modules/lit-html/lib/template-result.js: ReferenceError: window is not defined，这对正在发生的事情更清楚一些。

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

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

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

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

于 2021-06-20T02:16:51.320 回答