Как мне импортировать материальный веб-компонент в SvelteKit?

Я выполнил стандартный учебник в sveltkit, чтобы создать проект Typescript для базового шаблона. .

Я хотел использовать кнопку веб-компонента материала .

I 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? Любой совет был бы потрясающим.


svelte sveltekit
person user1059939    schedule 19.06.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вау, это сообщение об ошибке очень бесполезно. В проекте, не относящемся к TS SvelteKit, вы получаете Error when evaluating SSR module /node_modules/lit-html/lib/template-result.js: ReferenceError: window is not defined, что немного яснее о том, что происходит.

При импорте материальных веб-компонентов выполняется код, использующий window, который недоступен на сервере. Из-за этого Vite выдает ошибку при попытке обработать импортированную mwc-button библиотеку. Вы можете использовать динамический импорт. в функции жизненного цикла Svelte onMount, чтобы библиотека импортировалась только на клиенте. Вам нужно будет сделать это с любым импортируемым веб-компонентом.

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

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

Для получения дополнительной информации см. Как использовать клиентскую библиотеку, которая зависит от документа или окна? вопрос в FAQ по SvelteKit.

person Geoff Rich    schedule 20.06.2021