I'm trying to build a test application using shoelace webcomponents but when I execute npm run build command it fails. This code currently works while using npm run dev and has been tested with other webcomponent libraries like ui5-webcomponents and in both cases the command failed.
My code is the following:
<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>
And the error I get is:
> 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
I've also created a small repo with my existing code. How can I fix this error?
You can fix this problem by just moving your webcomponent libraries to devDependencies inside your package.json. Doing this it should work properly.