SvelteKit 2.21.3 Breaks Certain CommonJS Packages in Production
#13888
Development PRs
fixes #13888
We've had issues in the past because isHttpError, isRedirect, and isActionFailure can start reporting false negatives when something somewhere decides to load two copies of the modules the classes are declared in. This switches to a tagged, structural approach that will survive these boundaries. The downside is that some library could throw { _tag: 'SvelteKitRedirect' } and isRedirect would report true, but... I mean, at that point, "hack the library at your own peril", I guess.
This would let us revert our prior attempt at externalizing dependencies, which has caused additional bugs.
Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
Tests
- Run the tests with
pnpm testand lint the project withpnpm lintandpnpm check
Changesets
- If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running
pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.
Edits
- Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.
closes #13894
We've had a long-running battle with instanceof checks inside the codebase: when you call error(...) or redirect(...) in your code, SvelteKit needs to check that the thrown object is an instance of HttpError or Redirect.
Recently we tried #13843, which attempts to ensure that any of your dependencies that depend on @sveltejs/kit are bundled, since @sveltejs/kit is also bundled, and that means that your app will only have a single copy of SvelteKit (and classes like HttpError) in memory. But that has problems of its own.
This PR goes in the opposite direction, by making it possible to not bundle @sveltejs/kit in the first place. Aside from being a lot simpler, this feels more correct. The one compromise is that we need to expose a @sveltejs/kit/internal package so that classes can be shared between code in @sveltejs/kit and code in $app/... (which is bundled, necessarily, as it relies on virtual modules etc). But because we're controlling how types/index.d.ts is generated, this module is invisible to TypeScript (and therefore won't show up in import autocomplete suggestions etc).
Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
Tests
- Run the tests with
pnpm testand lint the project withpnpm lintandpnpm check
Changesets
- If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running
pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.
Edits
- Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.
Issue
Describe the bug
After upgrading to SvelteKit 2.21.5 from SvelteKit 2.21.2, I am starting to get ReferenceError: require is not defined in ES module scope whenever I import a package that uses require in any capacity. This did not happen before SvelteKit 2.21.3.
I thought it might be an issue with specific packages or projects, but it's not. I tested three different projects, all with different dependencies, and the same problem occurred.
Examples of affected packages:
- marked ()
- highlight.js (https://www.npmjs.com/package/highlight.js)
- @google/genai ()
- nodemailer ()
I concluded that the issue is caused by SvelteKit versions >= 2.21.3 because I kept downgrading, and once I went below 2.21.3, things worked as expected.
Reproduction
- Create a new SvelteKit project
- Install one or more of the packages mentioned above
- Import one or more of them in a server module (e.g.
+page.server.ts, code inside a.server.tsfile, or files inside the$lib/serverdirectory) - Build your app
- Run the app and execute any code that would cause the module to be loaded
Logs
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '[REDACTED_PATH]/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at ExportsCache.has (file://[REDACTED_PATH]/build/server/chunks/hooks.server-MojicEX3.js:15490:20)
at Module.patchedRequire (file://[REDACTED_PATH]/build/server/chunks/hooks.server-MojicEX3.js:15618:22)
at Hook._require.Module.require (file://[REDACTED_PATH]/build/server/chunks/hooks.server-MojicEX3.js:15557:28)
at require (node:internal/modules/helpers:135:16)
at Object.<anonymous> ([REDACTED_PATH]/node_modules/highlight.js/lib/index.js:1:12)
at Module._compile (node:internal/modules/cjs/loader:1730:14)
at Object..js (node:internal/modules/cjs/loader:1895:10)
at Module.load (node:internal/modules/cjs/loader:1465:32)
at Function._load (node:internal/modules/cjs/loader:1282:12)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
System Info
System:
OS: Windows 11 10.0.26100
CPU: (28) x64 Intel(R) Core(TM) i7-14700K
Memory: 35.78 GB / 63.70 GB
Binaries:
Node: 22.16.0 - C:\Program Files\nodejs\node.EXE
npm: 11.4.1 - ~\AppData\Roaming\npm\npm.CMD
bun: 1.2.16 - ~\.bun\bin\bun.EXE
Browsers:
Edge: Chromium (137.0.3296.68)
Internet Explorer: 11.0.26100.1882
npmPackages:
@sveltejs/adapter-node: ^5.2.12 => 5.2.12
@sveltejs/kit: ^2.21.5 => 2.21.5
@sveltejs/vite-plugin-svelte: ^5.1.0 => 5.1.0
svelte: ^5.34.2 => 5.34.2
vite: ^6.3.5 => 6.3.5
Severity
blocking an upgrade
Additional Information
No response
Info
Hmm @eltigerchino is this another downstream of the bundling change? It appears like we're loading a cjs version when we're expecting an esm version -- for example, marked exports both but we wouldn't expect to see this error if we were loading the esm one...
I can confirm this issue with the package @sentry/sveltekit.
I've tested with marked and highlight.js and can't seem to reproduce this. Can you please share a minimal reproduction so that we can know the exact conditions this bug occurs in?
Hmm @eltigerchino is this another downstream of the bundling change? It appears like we're loading a
cjsversion when we're expecting anesmversion -- for example,markedexports both but we wouldn't expect to see this error if we were loading theesmone...
It should be related to https://github.com/sveltejs/kit/pull/13843/files#diff-beef34c36ed87d7835d0166655010910fba9949a6ef95042cb468d7d73423816 but that only bundles packages that declare a dependency on @sveltejs/kit.
We had this issue with @sentry/sveltekit a week ago #13869 but that was due to their exports field pointing to the CJS version under the node condition, so we managed to fix that upstream. Even then, it was only bundled because it had a peer dep on kit, which none of these packages seem to have.
@eltigerchino Unfortunately, I am also unable to reproduce the issue in a clean, new SvelteKit project. However, I have two larger projects that exhibit the same problem described above. Is there a way to privately share one of them with you to avoid leaking the contents to the public?
I found the cause. It is because of both @sveltejs/kit (>= 2.21.3) and @sentry/sveltekit.
I had the following code in hooks.client.ts:
import * as Sentry from "@sentry/sveltekit";
import { handleErrorWithSentry } from "@sentry/sveltekit";
Sentry.init({
dsn: "[REDACTED]",
tracesSampleRate: 1.0,
enabled: import.meta.env.PROD,
});
export const handleError = handleErrorWithSentry();And this code in hooks.server.ts:
import * as Sentry from "@sentry/sveltekit";
import { sequence } from "@sveltejs/kit/hooks";
import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit";
Sentry.init({
dsn: "[REDACTED]",
tracesSampleRate: 1.0,
enabled: import.meta.env.PROD,
});
export const handle = sequence(sentryHandle());
export const handleError = handleErrorWithSentry();After I commented those out, I was able to build and run my application normally without encountering the errors reported in the original message.
For some reason, SvelteKit versions after 2.21.3 don't play nicely with @sentry/sveltekit (or the other way around?).
The reason I wasn't able to reproduce the issue is that the reproduction project didn't use @sentry/sveltekit. After adding it to the reproduction project, I began to encounter the same errors.
Same problem here (svelteKit + sentry).
What version of @sentry/sveltekit are you using? This should have been fixed in https://github.com/getsentry/sentry-javascript/releases/tag/9.28.1 but there may be remaining issues causing the CJS version of Sentry to be bundled instead. Possibly related: getsentry/sentry-javascript#16586
I also encounter the issue, but my logs seems to indicate that it's related to chokidar this time.
| Dependency | Version |
|---|---|
@sentry/sveltekit | 9.29.0 |
@sveltejs/kit | 2.21.5 |
It is interesting to note, that chokidar is not one of my dependencies, it is a dependency of one of my dependencies.
Staying on @sveltejs/kit@2.21.2 is the only way I've found to avoid the issue.
✗ Build failed in 10.92s
error during build:
[commonjs--resolver] ../../node_modules/.pnpm/fsevents@2.3.3/node_modules/fsevents/fsevents.node (1:0): Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)
file: /REDACTED/node_modules/.pnpm/fsevents@2.3.3/node_modules/fsevents/fsevents.node:1:0 (/REDACTED/node_modules/.pnpm/chokidar@3.6.0/node_modules/chokidar/index.js)
1: ����@<�
��*...
^
4*
h���/System/Library/Frameworks/CoreFoundation.framework/Versions...
3: ���H��1�H���L���L���H�����L�E�L��H��1�����uH�E�H�[A^A_]��}f.�UH��AWAVSPI��H��I��H�H...
at getRollupError (file:///REDACTED/node_modules/.pnpm/rollup@4.42.0/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
at ParseError.initialise (file:///REDACTED/node_modules/.pnpm/rollup@4.42.0/node_modules/rollup/dist/es/shared/node-entry.js:14293:28)
at convertNode (file:///REDACTED/node_modules/.pnpm/rollup@4.42.0/node_modules/rollup/dist/es/shared/node-entry.js:16197:10)
at convertProgram (file:///REDACTED/node_modules/.pnpm/rollup@4.42.0/node_modules/rollup/dist/es/shared/node-entry.js:15440:12)
at Module.setSource (file:///REDACTED/node_modules/.pnpm/rollup@4.42.0/node_modules/rollup/dist/es/shared/node-entry.js:17185:24)
at async ModuleLoader.addModuleSource (file:///REDACTED/node_modules/.pnpm/rollup@4.42.0/node_modules/rollup/dist/es/shared/node-entry.js:21187:13)
ELIFECYCLE Command failed with exit code 1.
ERROR: command finished with error: command (/REDACTED/apps/website) ~/Library/pnpm/.tools/pnpm/10.12.1/bin/pnpm run build exited (1)
We really need a minimal reproduction (in the form of a downloadable repository) because I can't reproduce this by installing marked and @sentry/sveltekit.
It's not enough to install the packages. You also have to import them to a server file e.g. hooks.server.ts. Here is a minimal repo that creates the error: https://github.com/yaman-cruise/svelte-sentry
- run
pnpm buildand you'll get the error
It's not enough to install the packages. You also have to import them to a server file e.g. hooks.server.ts.
Yes, I've installed them and imported them into a server file.
Here is a minimal repo that creates the error: yaman-cruise/svelte-sentry
1. run `pnpm build` and you'll get the error
This doesn't error for me after running pnpm build. Which Node version and operating system are you using when running the build? I'm running on WSL 2 Ubuntu 22.04.5 LTS and Node v18.20.8
It's not enough to install the packages. You also have to import them to a server file e.g. hooks.server.ts.
Yes, I've installed them and imported them into a server file.
Here is a minimal repo that creates the error: yaman-cruise/svelte-sentry
1. run `pnpm build` and you'll get the errorThis doesn't error for me after running
pnpm build. Which Node version and operating system are you using when running the build? I'm running on WSL 2 Ubuntu 22.04.5 LTS and Node v18.20.8
I'll share a reproduction project shortly.
@eltigerchino attached is a dead-simple project that only requires you to run npm install or pnpm install, build the project, and then run node .\build\index.js in the project's root directory.
After that, navigate to localhost:3000, type anything in the "Markdown" text area, and press convert. You will see that a 500 Internal Server Error is thrown in the network tab, and an error message is shown in the UI.
Once you comment out the Sentry stuff from hooks.client.ts and hooks.server.ts files & rebuild the project, you will no longer encounter the issue.
I set up Sentry using a temporary project on my account, so please let me know when you are done so I can take it down before any malicious actors abuse the API keys 😅
Also, I am running the project on Windows 11 Pro 24H2 and using Node v22.16.0. However, the issue also occurs on Linux and within Linux Docker containers.
File deleted
It's not enough to install the packages. You also have to import them to a server file e.g. hooks.server.ts. Here is a minimal repo that creates the error: https://github.com/yaman-cruise/svelte-sentry
- run
pnpm buildand you'll get the error
And this isn't enough, either. You'll need to set up Sentry correctly for it to reproduce the issue. The linked repository isn't correctly set up.
@eltigerchino attached is a dead-simple project that only requires you to run
npm installor sveltekit-2.21.3-bug-reproduction.zip
I dont get any error on build and preview.
I dont get it... As soon as I update @sveltejs/kit from 2.21.2 to 2.21.5, I am getting this error (only on production):
The strange thing is, If I run the build and preview locally, everything works as expected.
I am running my application within a docker container node:23.11.0-alpine3.21.
@abdelfattahradwan, are you running your svelte-app using docker / alpine?
@eltigerchino attached is a dead-simple project that only requires you to run
npm installor sveltekit-2.21.3-bug-reproduction.zipI dont get any error on build and preview.
I dont get it... As soon as I update @sveltejs/kit from 2.21.2 to 2.21.5, I am getting this error (only on production):
The strange thing is, If I run the build and preview locally, everything works as expected.
I am running my application within a docker container
node:23.11.0-alpine3.21.
Yes, that's the bug 😄
It only throws when you run node .\build\index.js. npm run preview won't throw errors. Also, building does not throw. The bug occurs when you import CJS modules at runtime while the plugin is in use.
@abdelfattahradwan, are you running your svelte-app using docker / alpine?
I tested on Windows, Linux (WSL), and inside Linux Docker containers.
Yes, that's the bug 😄
well - the strange thing ist, that I am not able to reproduce this locally.
Yes, that's the bug 😄
well - the strange thing ist, that I am not able to reproduce this locally.
I am sure you will be able to if you try my reproduction project.
@eltigerchino Here's a screenshot of the highlighted stacktraces from Sentry if that's helpful.
@eltigerchino attached is a dead-simple project that only requires you to run
npm installorpnpm install, build the project, and then runnode .\build\index.jsin the project's root directory.After that, navigate to
localhost:3000, type anything in the "Markdown" text area, and press convert. You will see that a500 Internal Server Erroris thrown in the network tab, and an error message is shown in the UI.Once you comment out the Sentry stuff from
hooks.client.tsandhooks.server.tsfiles & rebuild the project, you will no longer encounter the issue.I set up Sentry using a temporary project on my account, so please let me know when you are done so I can take it down before any malicious actors abuse the API keys 😅
Also, I am running the project on Windows 11 Pro 24H2 and using Node
v22.16.0. However, the issue also occurs on Linux and within Linux Docker containers.
Thank you! So sorry you had to go out of your way for this. I think I have enough to find out the cause of the issue. But, it's more likely that we will merge #13894 and revert this whole bundling fiasco. I'm so sorry for all the trouble this has caused!
Thank you! So sorry you had to go out of your way for this. I think I have enough to find out the cause of the issue. But, it's more likely that we will merge #13894 and revert this whole bundling fiasco. I'm so sorry for all the trouble this has caused!
I am more than happy to help. Thank you so much for taking the time to look into it 🙏🏼
@abdelfattahradwan, I am not able to reproduce this locally with your repo:
FROM node:23.11.0-alpine3.21
WORKDIR /app
COPY . .
ENV NODE_ENV=production
RUN corepack enable && corepack prepare pnpm@10.12.1 --activate
RUN pnpm install --frozen-lockfile
RUN pnpm run build
EXPOSE 3000
CMD ["node", "/app/build/index.js"]
After running the container, the app seems to work fine.
Am I missing something?
- I deleted the Sentry project, so the plugin might not work properly during the build.
- You have to execute code that imports CJS modules. The app doesn't do that by default, but typing something in the text area and pressing convert will throw an error because the API endpoint that handles the request imports
marked.
A very simple workaround in the meantime is to add @sentry/sveltekit to the ssr.external option in vite.config.ts to prevent Vite from bundling it in.
#13869 (comment)
I've traced the root cause to https://github.com/open-telemetry/opentelemetry-js/blob/ec17ce48d0e5a99a122da5add612a20e2dd84ed5/experimental/packages/opentelemetry-instrumentation/src/platform/node/instrumentation.ts#L50-L51 where the @opentelemetry/instrumentation package used by @sentry/node might be pulling in the require-in-the-middle package in its ESM build, and I think require by default doesn't work in ESM? (unless you instantiate it with createRequire())
@eltigerchino externalising does work, yes. However, another issue arises with specific packages, where, when externalised, they cause errors with the development server when imported. If I recall correctly, they were (I confused two different things)marked and highlight.js.
I tried the createRequire workaround, but it didn't work. I got the same bug after building & running.
@eltigerchino externalising does work, yes. However, another issue arises with specific packages, where, when externalised, they cause errors with the development server when imported. If I recall correctly, they were
markedandhighlight.js.
All packages are externalised during SSR by default so adding Sentry to that list is important to tell SvelteKit not to bundle it although it has a dependency on SvelteKit (that new behaviour causing issues).
I tried the
createRequireworkaround, but it didn't work. I got the same bug after building & running.
Yeah, you won't be able to do this yourself. It has to be in the same module as where require is being used. I suspect is already doing this and it's what we use in the Node adapter so that CJS packages work when bundled (this is a separate step after the Vite build where we don't have that plugin because we never bundled dependencies before during this stage).
Yeah, you won't be able to do this yourself. It has to be in the same module as where
requireis being used. I suspect is already doing this and it's what we use in the Node adapter so that CJS packages work when bundled (this is a separate step after the Vite build where we don't have that plugin because we never bundled dependencies before during this stage).
Ah, I thought it was just a matter of adding const require = createRequire(import.meta.url) before the import statements for the problematic packages. Thanks for the info.
Pro tip: You can prefix GitHub URLs of issues, PRs or discussions with svcl.dev/ to view them on this page! Also try it on a GitHub release ;)