issue with using CommonJS modules in "svelte/kit build"

[henryennis]

App 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

[aral]

Seeing the same thing on build. Also seems to manifest as a 500 import not found: default error on npm run dev if a svelte component that uses a CommonJS module is installed from npm (works correctly if installed via a local file reference). Happy to open a separate issue for that but it feels like they’re the same one.

[henryennis]

Seeing the same thing on build. Also seems to manifest as a 500 import not found: default error on npm run dev if a svelte component that uses a CommonJS module is installed from npm (works correctly if installed via a local file reference). Happy to open a separate issue for that but it feels like they’re the same one.

I will adapt the post accordingly

[aral]

I will adapt the post accordingly

Note that:

1. The same issue happens when a Svelte component that imports a CommonJS module is imported in to a vanilla JS Vite project.

2. 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.)

[benmccann]

I would suggest trying all the tips in https://github.com/sveltejs/kit/blob/master/documentation/faq/70-packages.md as a first step

Unfortunately, CommonJS is somewhat of a known pain point with Vite at the moment: vitejs/vite#2579

[aral]

@benmccann That’s hugely useful, thank you.

[tolu]

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

// vite.config.cjs
const pkg = require('./package.json');

/** @type {import('vite').UserConfig} */
export default {
  ssr: {
    noExternal: Object.keys(pkg.dependencies || {})
  },
};

// svelte.config.cjs
const sveltePreprocess = require('svelte-preprocess');
const node = require('@sveltejs/adapter-node');

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
  preprocess: sveltePreprocess(),
  kit: {
    adapter: node(),
    target: '#svelte',

    // vite: {
    /* moved to vite.config.cjs */
    // }
  }
};

[henryennis]

weirdly this solution from layercake issue tracker 👇 worked for me (with @sanity/client dependency)

Move vite config to own file vite.config.cjs so that

// vite.config.cjs

const pkg = require('./package.json');



/** @type {import('vite').UserConfig} */

export default {

  ssr: {

    noExternal: Object.keys(pkg.dependencies || {})

  },

};

Are u saying to seperate vite config from svelte config cjs?

[tolu]

Are u saying to seperate vite config from svelte config cjs?

Yes, at least that worked for me 👍 I'll update my original comment to be more clear!

[RemyDekor]

I'm not sure I understand how noExternal is supposed to work, but just removing the vite config from the svelte.config.cjs worked for me

[benmccann]

The original issue description referred to carbon-components-svelte. For that library, I'm going to close this in favor of vitejs/vite#3024

For other libraries, the couple I tested seem to have been fixed by removing noExternal from the default template

If people are still having issues, please file a new issue with the specific library you're using and steps to reproduce or a repo that reproduces the issue