使用webcomponents和@sveltejs/adapter-static@next时，npm run build失败

Question

我正在尝试使用shoelace webcomponents构建一个测试应用程序，但是当我执行npm run build命令时，它失败了。这段代码目前在使用npm run dev时可以正常工作，并且已经使用ui5- webcomponent等其他and组件库进行了测试，在这两种情况下命令都失败了。

我的代码如下：

<script>
    import { onMount } from 'svelte';
    import "@shoelace-style/shoelace/dist/themes/base.css";
    onMount(async () => {
        await import('@shoelace-style/shoelace/dist/components/button/button');
    });
</script>

<sl-button>Test</sl-button>

我得到的错误是：

> npm run build

> ~TODO~@0.0.1 build /home/jorge/Code/xprmnt/svelte-shoelace-config
> svelte-kit build

vite v2.3.3 building for production...
✓ 28 modules transformed.
.svelte-kit/output/client/_app/manifest.json                            1.77kb
.svelte-kit/output/client/_app/pages/index.svelte-464950c5.js           0.53kb / brotli: 0.33kb
.svelte-kit/output/client/_app/layout.svelte-904f1151.js                0.49kb / brotli: 0.29kb
.svelte-kit/output/client/_app/error.svelte-ec464882.js                 1.19kb / brotli: 0.57kb
.svelte-kit/output/client/_app/chunks/preload-helper-9f12a5fd.js        0.61kb / brotli: 0.31kb
.svelte-kit/output/client/_app/assets/start-a8cd1609.css                0.16kb / brotli: 0.10kb
.svelte-kit/output/client/_app/chunks/vendor-43cd886a.js                5.05kb / brotli: 1.98kb
.svelte-kit/output/client/_app/assets/pages/index.svelte-a2c9796c.css   7.29kb / brotli: 1.43kb
.svelte-kit/output/client/_app/start-2c597637.js                        16.71kb / brotli: 5.32kb
.svelte-kit/output/client/_app/chunks/button-4ff57d8f.js                33.65kb / brotli: 8.11kb
vite v2.3.3 building SSR bundle for production...
✓ 23 modules transformed.
.svelte-kit/output/server/app.js   62.07kb

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-static
> document is not defined
ReferenceError: document is not defined
    at file:///home/jorge/Code/xprmnt/svelte-shoelace-config/.svelte-kit/output/server/app.js:249:9
    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
    at async Loader.import (internal/modules/esm/loader.js:177:24)
    at async prerender (file:///home/jorge/Code/xprmnt/svelte-shoelace-config/node_modules/@sveltejs/kit/dist/chunks/index5.js:79:14)
    at async Object.prerender (file:///home/jorge/Code/xprmnt/svelte-shoelace-config/node_modules/@sveltejs/kit/dist/chunks/index5.js:296:5)
    at async adapt (file:///home/jorge/Code/xprmnt/svelte-shoelace-config/node_modules/@sveltejs/adapter-static/index.js:17:4)
    at async adapt (file:///home/jorge/Code/xprmnt/svelte-shoelace-config/node_modules/@sveltejs/kit/dist/chunks/index5.js:322:2)
    at async file:///home/jorge/Code/xprmnt/svelte-shoelace-config/node_modules/@sveltejs/kit/dist/cli.js:616:5
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ~TODO~@0.0.1 build: `svelte-kit build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ~TODO~@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/jorge/.npm/_logs/2021-05-24T17_08_03_058Z-debug.log

我还用我现有的代码创建了a small repo。如何修复此错误？

Answer 1

您可以通过将fix组件库移动到package.json中的devDependencies来解决此问题。做到这一点，它应该可以正常工作。