issue with using CommonJS modules in "svelte/kit build"
See original GitHub issueApp runs normally while running in dev mode, error is thrown on build
svelte.config.cjs
Note the package causing this issue is set to be converted to esm as of the:
optimizeDeps: {
include: ['carbon-components-svelte', 'clipboard-copy']
},
svelte.config.cjs
const sveltePreprocess = require('svelte-preprocess');
const node = require('@sveltejs/adapter-node');
const pkg = require('./package.json');
/** @type {import('@sveltejs/kit').Config} */
module.exports = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: sveltePreprocess(),
kit: {
// By default, `npm run build` will create a standard Node app.
// You can create optimized builds for different platforms by
// specifying a different adapter
adapter: node(),
ssr: false,
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
vite: {
// optimizeDeps: {
// include: ['carbon-components-svelte', 'clipboard-copy']
// },
ssr: {
noExternal: Object.keys(pkg.dependencies || {})
},
plugins: [
require('vite-plugin-windicss').default()
]
}
}
};
importing modules from a commonJS package “carbon-components-svelte” like so:
index.svelte
<script>
import {
FluidForm,
TextInput,
PasswordInput, Tile
} from "carbon-components-svelte";
import ButtonFullBleed from "../components/buttons/buttonFullBleed.svelte"
</script>
error
PS C:\Users\henry\sveltekit-dashboard> npm run build
> sveltekit-dashboard@0.0.1 build C:\Users\henry\sveltekit-dashboard
> svelte-kit build
vite v2.1.5 building for production...
✓ 320 modules transformed.
.svelte/output/client/_app/manifest.json 0.67kb
.svelte/output/client/_app/chunks/index-4d122fc8.js 5.48kb / brotli: 2.12kb
.svelte/output/client/_app/assets/pages\index.svelte-802f02f9.css 4.19kb / brotli: 0.85kb
.svelte/output/client/_app/start-fbcbe901.js 15.83kb / brotli: 5.41kb
.svelte/output/client/_app/pages\index.svelte-97280b82.js 59.90kb / brotli: 15.52kb
.svelte/output/client/_app/assets/start-9caedf08.css 459.55kb / brotli: 37.33kb
vite v2.1.5 building SSR bundle for production...
✓ 17 modules transformed.
.svelte/output/server/app.js 544.67kb
Run npm start to try your app locally.
> Using @sveltejs/adapter-node
> Named export 'FluidForm' not found. The requested module 'carbon-components-svelte' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'carbon-components-svelte';
const {FluidForm} = pkg;
file:///C:/Users/henry/sveltekit-dashboard/.svelte/output/server/app.js:8
import {FluidForm} from "carbon-components-svelte";
SyntaxError: Named export 'FluidForm' not found. The requested module 'carbon-components-svelte' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'carbon-components-svelte';
const {FluidForm} = pkg;
at ModuleJob._instantiate (internal/modules/esm/module_job.js:98:21)
at async ModuleJob.run (internal/modules/esm/module_job.js:143:5)
at async Loader.import (internal/modules/esm/loader.js:165:24)
at async prerender (file:///C:/Users/henry/sveltekit-dashboard/node_modules/@sveltejs/kit/dist/chunks/index6.js:513:14)
at async AdapterUtils.prerender (file:///C:/Users/henry/sveltekit-dashboard/node_modules/@sveltejs/kit/dist/chunks/index6.js:745:4)
at async adapt (C:\Users\henry\sveltekit-dashboard\node_modules\@sveltejs\adapter-node\index.js:26:4)
at async adapt (file:///C:/Users/henry/sveltekit-dashboard/node_modules/@sveltejs/kit/dist/chunks/index6.js:767:2)
at async file:///C:/Users/henry/sveltekit-dashboard/node_modules/@sveltejs/kit/dist/cli.js:633:5
Note that:
The same issue happens when a Svelte component that imports a CommonJS module is imported in to a vanilla JS Vite project.
You can see the issue for yourselves by importing and instantiating the svelte-nano-donate component at this commit: small-tech/svelte-nano-donate@0d7bcf9 (works, QRious library is inlined) and the one before it (doesn’t work, QRious library is imported from node modules). Note that the second one will also work if you npm install the component via a local file path instead of from npm (I thought everything was fine until I tried to install the component in a Vite/SvelteKit project via npm). (I’m going to go check on the Vite project to see if there are any related issues as we cannot be the first ones to get bitten by this.)
Credit: aral
other information Node version: v14.15.0 OS: windows 10 10.0, build 19041
Issue Analytics
- State:
- Created 2 years ago
- Reactions:9
- Comments:37 (11 by maintainers)
Top GitHub Comments
Any news about this? I am using latest
adapter-static
and facing the same issue, but in this case withstyle-value-types
dependency (used insvelte-motion
)…Edit: Apparently adding the failing dependencies to SSR noExternal property of vite config, make it work, as @benmccann said before:
In the
svelte.config.js
:Just had the same issue and weirdly this solution from
layercake
issue tracker 👇 worked for me (but with@sanity/client
dependency that needs prebundling)Move vite config to own file
vite.config.cjs
so that