-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
issue with using CommonJS modules in "svelte/kit build" #928
Comments
Seeing the same thing on build. Also seems to manifest as a |
I will adapt the post accordingly |
Note that:
(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.) |
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 |
@benmccann That’s hugely useful, thank you. |
Just had the same issue and weirdly this solution from Move vite config to own file // 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 */
// }
}
}; |
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! |
I'm not sure I understand how |
The original issue description referred to For other libraries, the couple I tested seem to have been fixed by removing 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 |
@benmccann -- Sorry to post to a closed issue -- but I have no idea if this is related or not at all . I am trying to use Antony's svelte-mapbox in my new Sveltekit app -- and as soon as I uncomment out the import Map statement -- I am getting a 500 error in the browser --
Is this similar or different than this issue? I tried the vite noExternal thing above but that didn't change anything ... TIA! /Steve |
@sjmcdowall there's an issue over in that repo that describes how to use it with SvelteKit: beyonk-group/svelte-mapbox#44 |
@benmccann -- Thank you! Sort of embarrassed I didn't see that myself. Cheers! |
For the original issue, it can be resolved (partly) by using the carbon's import preprocessor, since it avoids going through index.js |
This reverts commit 83d23a5.
* 👷 Switch to ESM build * 🔧 Use `module` instead of `main` config fields * 📌 Reinstall sk-auth * 🏷️ Fix type errors * 🔧 Create separate Vite config JS according to sveltejs/kit#928 * Revert "🔧 Create separate Vite config JS according to sveltejs/kit#928" This reverts commit 83d23a5. * ➕ Add `build-esm` as dev and peer dependency * 👷 Compile CJS module * 📌 Reinstall deps * 🔧 Switch to ESM build * Revert "🔧 Switch to ESM build" This reverts commit c908a57. * 🔧 Use `main` instead of `module` in `package.json`
We'll work on improved CJS support for Vite. But in the meantime see auth0/node-jsonwebtoken#785 auth0/node-jsonwebtoken#655 to improve that library |
Facing the same issue with nanoid, specifically importing strings from nanoid-dictionary.
nanoid and nanoid-dictionary both export as ES. |
That library is using an old version of |
@benmccann thank you so much for that! 👏✌️ |
see sveltejs/kit#928 ``` Named export 'faAsterisk' not found. The requested module '@fortawesome/free-solid-svg-icons' 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 '@fortawesome/free-solid-svg-icons'; const { faArrowLeft, faArrowRight, faAsterisk, faArrowRotateLeft, faFolderPlus, faEllipsis } = pkg; ```
This is the solution that worked for me.
|
I was having this exact issue with @FortAwesome icons and this fixed it
|
A better solution for icon libraries is to use this option for performance reasons: https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#prebundlesveltelibraries |
Hi, thanks for the tip! Unfortunately, unless I am doing it wrong, this has no effect. Is this supposed to be uses in addition to the
Produces: I did see this at the link you provided and I deleted the folder but it did not help: |
It doesn't go under
|
hmmm still no change...
produces at build time:
whereas this works fine:
I tried swapping out the adapters and noticed that when using |
I'm personally using fort-awesome icons without
|
I too am using
I'll settle for having to use ssr.noExternal - slightly degraded performance is better than none at all! |
Hmm. That seems quite strange. I wonder if you have an old version of Vite or something. You can run |
Hey @benmccann,
|
I tried that and still got error |
This allows modern build systems (vite) to properly use the correct module type (ESM). See sveltejs/kit#928 for more details.
* Add package.json exports property This allows modern build systems (vite) to properly use the correct module type (ESM). See sveltejs/kit#928 for more details.
I had similar problems as other people here in the thread. I got the same error saying it doesn't export a default. So I did a dynamic import in the
|
hi, I used sveletkit and plotly.js-dist-min in my project. yarn dev could work, but yarn build not. The error message is that: E:\Projects\leakage-detector\node_modules\rollup\dist\shared\rollup.js:19908 SyntaxError: Unexpected token (37:121525) in E:/Projects/leakage-detector/node_modules/plotly.js-dist-min/plotly.min.js …… id: 'E:/Projects/leakage-detector/node_modules/plotly.js-dist-min/plotly.min.js', |
Followed the advice here: sveltejs/kit#928
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:
svelte.config.cjs
importing modules from a commonJS package "carbon-components-svelte" like so:
index.svelte
error
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
The text was updated successfully, but these errors were encountered: