`@sentry/svelte` is not a proper ESM package

[GauBen]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/svelte

SDK Version

7.98.0

Framework Version

Svelte 4

Link to Sentry event

No response

SDK Setup

None needed

Steps to Reproduce

https://stackblitz.com/edit/stackblitz-starters-h72nkr?file=index.js

1. Use "type": "module" in package.json
2. Import @sentry/svelte in Node.js

Expected Result

Should work

Actual Result

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/projects/stackblitz-starters-h72nkr/node_modules/svelte/src/runtime/ssr.js from /home/projects/stackblitz-starters-h72nkr/node_modules/@sentry/svelte/cjs/performance.js not supported.
Instead change the require of ssr.js in /home/projects/stackblitz-starters-h72nkr/node_modules/@sentry/svelte/cjs/performance.js to a dynamic import() which is available in all CommonJS modules.

The cause of this error is correctly described by https://publint.dev/@sentry/svelte@7.98.0

### Tasks

[GauBen]

I would open a merge request but I'm not familiar enough with your build system to do it without breaking anything.

Here's what I'd do:

1. Output ESM files with .mjs extension instead of .js
2. Add "type": "commonjs" to package.json
3. Add "exports": ... to package.json with the following contents:

{
  "exports": {
    ".": {
      "types": "./types/index.d.ts",
      "import": "./esm/index.mjs",
      "require": "./cjs/index.js"
    }
  }
}

It also seems that many sentry packages have a broken package.json and/or ESM build:

• https://publint.dev/@sentry/sveltekit@7.98.0
• https://publint.dev/@sentry/node@7.98.0
• https://publint.dev/@sentry/vue@7.98.0
• ...

I'd also add publint to the CI to ensure all packages are correctly build

[Lms24]

Hey @GauBen thanks for writing in!

Thanks for the input and I agree, our package config isn't ideal. This is on our radar for v8 as you've probably seen in #10046.

My question here is if you're currently experiencing problems within a Svelte App of yours? The reproduction link from your post doesn't contain a svelte app. As long as there's no actual problem with the current package structure, I'd avoid changing things in v7 just because of the publint warnings.

Note, We need to change the structure for Svelte 5 which we don't support yet. This is tracked in #10318 and will also happen at latest in v8 of our SDK (coming soon).

If you'd like to help out, feel free to open a PR - I'm happy to review. Also regarding publint, I'm not sure how this works in CI but I'm not opposed to adding it once we're actually ESM compatible (via #10046).

Please let me know if you think there's still an issue that we're not aware of. Otherwise I'm gonna close this issue to avoid too many open ones for the same problems.

[GauBen]

Hey @Lms24, thanks for your quick reply!

I do have the very same error on a SvelteKit app with @sveltejs/adapter-node. The SSR build contains a chain of import that fails the exact same way as the plain Node.js reproduction above. We currently work around it using a patch that makes the package ESM only:

diff --git a/package.json b/package.json
index 9067b2baaf1b2c2923d4b8cf58c10aace01a3b3c..dc5d3386c85596ad2df2b31759ed1d57a5551880 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/svelte",
   "author": "Sentry",
   "license": "MIT",
+  "type": "module",
   "engines": {
     "node": ">=8"
   },
@@ -15,14 +16,10 @@
     "types",
     "types-ts3.8"
   ],
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
-  "types": "types/index.d.ts",
-  "typesVersions": {
-    "<4.9": {
-      "types/index.d.ts": [
-        "types-ts3.8/index.d.ts"
-      ]
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./esm/index.js"
     }
   },
   "publishConfig": {

[GauBen]

Here is a repro closer to what happens: https://stackblitz.com/edit/sveltejs-kit-template-default-npzp3c?file=src%2Froutes%2F%2Bpage.svelte

[Lms24]

Hmm that's not great. Looked at your new reproduction and I still have a question: Are you actually declaring @sentry/svelte as a dependency in your project? Since you're using Sveltekit, I'd assume you're using our @sentry/sveltekit SDK, right? Generally, our SDK should be compatible with the Node adapter (in fact we do quite a lot to ensure it is).

Are you using any special Sentry setup or just the "standard" setup via the server and client hooks and vite config?