Sentry not working with ESModules while bundled

[nickmansrob]

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 package are you using?

@sentry/node

SDK Version

7.17.4

Framework Version

Typescript 4.8.4

Link to Sentry event

No response

Steps to Reproduce

I'm using Typescript configured to output esmodule files. The files are built and bundled using Vercel's ncc.

When an error occurs, the console outputs a Sentry error: ReferenceError: require is not defined. Full stacktrace below. The filepaths in the trace indicate that, while all packages are built using ESM style, Sentry still uses it's CommonJS files, and because require doesn't exist in the ESM world, this logically throws this error.

I've solved this issue by tampering Sentry's files in node_modules. In each package's package.json, I've replaced the line "main": "cjs/index.js", to "main": "esm/index.js",. This keeps the server running and sends all errors correctly to the Sentry Dashboard.

Unfortunately, the changes in the node_module folder result in letting our local test runner fail with SyntaxError: Cannot use import statement outside a module. Full stacktrace below. I've investigated those errors and made some extra changes in 'node_modules'. Inserting "type": "module" to each package.json and appending /index.js to each import of @sentry/utils/esm/buildPolyfills makes the tests succeed.

Yet, this lets the build fail again, and no tinkering with files can solve this.

Expected Result

The Sentry packages should auto-select the module property in each package.json and following the ESM rules in its ESM files. This results in proper usage of ESM compliant files and thus works as it should.

Actual Result

Stacktrace while running without changes in node_modules:

ReferenceError: require is not defined
    at call (***/node_modules/@sentry/node/cjs/module.js:22:1)
    at _4 (***/node_modules/@sentry/utils/cjs/buildPolyfills/_optionalChain.js:30:1)
    at _4 (***/node_modules/@sentry/utils/cjs/stacktrace.js:178:1)
    at _optionalChain (***/node_modules/@sentry/utils/cjs/buildPolyfills/_optionalChain.js:30:1)
    at line (***/node_modules/@sentry/utils/cjs/stacktrace.js:178:1)
    at stackParser (***/node_modules/@sentry/utils/cjs/stacktrace.js:28:1)
    at parseStackFrames (***/node_modules/@sentry/node/cjs/eventbuilder.js:10:1)
    at exceptionFromError (***/node_modules/@sentry/node/cjs/eventbuilder.js:22:1)
    at eventFromUnknownInput (***/node_modules/@sentry/node/cjs/eventbuilder.js:70:1)
    at eventFromException (***/node_modules/@sentry/node/cjs/client.js:122:1)

Stacktrace while running the test after the changes in node_modules:

(node:9821) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

***/node_modules/@sentry/node/esm/index.js:1
import { Integrations, getMainCarrier } from '@sentry/core';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async formattedImport (***/node_modules/mocha/lib/nodejs/esm-utils.js:7:14)
    at async Object.exports.requireOrImport (***/node_modules/mocha/lib/nodejs/esm-utils.js:38:28)
    at async Object.exports.loadFilesAsync (***/node_modules/mocha/lib/nodejs/esm-utils.js:91:20)
    at async singleRun (***/node_modules/mocha/lib/cli/run-helpers.js:125:3)
    at async Object.exports.handler (***/node_modules/mocha/lib/cli/run.js:370:5)

*** represent the process filepath which has been obfuscated.

[Lms24]

Hi @nickmansrob thanks for writing in!

The Sentry packages should auto-select the module property in each package.json

So, having read the documentation on the type property, I'm not sure if we can follow through with this request: As you've probably seen, we provide both, CJS as well as ESM files in our NPM packages. Our goal is to support all users, regardless of if they import or require our modules.

I was under the impression that bundlers would be able to select the correct files by specifying the respective entry points like so:

  "main": "cjs/index.js",
  "module": "esm/index.js",

Perhaps ncc doesn't respect this?

[BoKleynen]

From what I can tell ncc at least doesn't properly support selecting which file to include based on main and module, but as far as I know module is an unofficial convention some bundlers follow and other don't.

Nodejs itself doesn't support the module entry in package.json: https://nodejs.org/api/packages.html#nodejs-packagejson-field-definitions

Nodejs documents an alternative way of doing conditional exports that was based on this proposal

[Lms24]

Thanks for the information. I'm going to backlog this. Perhaps we can revisit this for the next major (changing this in a minor seems a little risky to me but happy to be proven wrong). PRs are always welcome in the meantime! ;)

[milesj]

Started running into this as well. Had to remove sentry for now to get around it :/

[nickmansrob]

I've investigated this issue a bit more. It turns out that adding

"exports": {
    "import": "./esm/index.js",
    "require": "./cjs/index.js"
  },

to the package.json files of the core, node and types package and adding

"exports": {
    ".": {
      "import": "./esm/index.js",
      "require": "./cjs/index.js"
    },
    "./esm/buildPolyfills": "./esm/buildPolyfills"
  },

to the package.json file of the utils package, with extra attention to adding those snippets above the main and module properties, solves the first problem I've been having when running a clean install of Sentry. Unfortunately, my test runner mocha still fails with the same error.

I do think, though, that this is some progress in supporting Sentry in combination with ncc. I'm still figuring out how to reconcile mocha with this, as adding "type": "module" now throws another error, while it used to fix these.

I've found yet another suggestion that renames all ESM .js files to .mjs, instead of having to add "type": "module", but I'm still investigating into this lead.

[GauBen]

Just updated to svelte v4 and started running into this issue

[vite] Error when evaluating SSR module /src/sentry.ts: failed to import "@sentry/svelte"
|- Error [ERR_REQUIRE_ESM]: require() of ES Module /home/gautier/project/node_modules/svelte/src/runtime/ssr.js from /home/gautier/project/node_modules/@sentry/svelte/cjs/performance.js not supported.
Instead change the require of ssr.js in /home/gautier/project/node_modules/@sentry/svelte/cjs/performance.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/home/gautier/project/node_modules/@sentry/svelte/cjs/performance.js:4:16)
    at Object.<anonymous> (/home/gautier/project/node_modules/@sentry/svelte/cjs/index.js:6:21)

It turns out @sentry/svelte is not a valid ESM package, to make it so, either:

• add {"type":"module"} in @sentry/svelte/ems/package.json
• use .mjs as file extension

Edit: here is a patch

diff --git a/esm/package.json b/esm/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..3dbc1ca591c0557e35b6004aeba250e6a70b56e3
--- /dev/null
+++ b/esm/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/package.json b/package.json
index 3ba6886cf87293eedb7578d22acd9913bcdbf370..ba0acf8f922377f554a21f21e827fe64a966b2b1 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
   "engines": {
     "node": ">=8"
   },
-  "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "types/index.d.ts",
   "typesVersions": {