[Bug Report] ESM Error on Electron SDK

[jas-kas]

Customer info in private repo https://github.com/getsentry/team-replay/issues/402

After installing Electron SDK with following package.json they get ESM errors when running sdk in main process.

Electron v28 Sentry SDK version 4.20.0

package.json:

{
  "name": "esm-error-example-package.json",
  "version": "1.0.0",
  "private": true,
  "packageManager": "[email protected]",
  "engines": {
    "node": "^20"
  },
  "workspaces": {
    "packages": [
      "packages/*"
    ]
  },
  "nohoist": [
    "**/electron",
    "**/electron/**",
    "**/jest",
    "**/jest/**"
  ],
  "resolutions": {
    "@types/react": "17.0.4",
    "@types/react-dom": "17.0.4",
    "axios": "1.3.5",
    "axios-retry": "3.4.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-router": "5.3.4",
    "react-error-overlay": "6.0.9",
    "winston": "3.8.2"
  },
  "devDependencies": {
    "@google-cloud/storage": "6.9.2",
    "@tsconfig/node20": "20.1.2",
    "@types/fs-extra": "11.0.1",
    "@types/lodash": "4.14.176",
    "@types/node": "20.10.0",
    "@types/semver": "7.3.12",
    "@typescript-eslint/eslint-plugin": "5.50.0",
    "@typescript-eslint/parser": "5.50.0",
    "axios": "0.27.2",
    "chalk": "4.1.2",
    "commander": "6.2.1",
    "eslint": "8.33.0",
    "eslint-config-prettier": "8.6.0",
    "eslint-plugin-jest": "27.2.1",
    "eslint-plugin-json": "3.1.0",
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "eslint-plugin-unused-imports": "2.0.0",
    "execa": "2.1.0",
    "fs-extra": "11.1.0",
    "husky": "8.0.3",
    "lerna": "5.6.2",
    "lint-staged": "13.2.0",
    "lodash": "4.17.21",
    "prettier": "2.8.7",
    "rimraf": "3.0.2",
    "semver": "7.3.8",
    "syncpack": "10.9.3",
    "ts-node": "10.9.1",
    "typescript": "5.1.6"
  },
}

[AbhiPrasad]

@timfish they also attached a yarn.lock in case package.json is not good enough to debug this, so lmk if you need that I can share.

[AbhiPrasad]

using Windows

error message:

package: [1] App threw an error during load
package: [1] SyntaxError: Cannot use import statement outside a module
package: [1]     at ../../node_modules/@sentry-internal/tracing/esm/node/integrations/mysql.js (D:\Desktop\__PATH_TO_WORKSPACE__\packages\backend\build\app.js:4453:1)
package: [1]     at __webpack_require__ (D:\Desktop\__PATH_TO_WORKSPACE__\packages\backend\build\app.js:36961:42)
package: [1]     at eval (webpack-internal:///../../node_modules/@sentry/node/esm/tracing/integrations.js:15:82)
package: [1]     at ../../node_modules/@sentry/node/esm/tracing/integrations.js (D:\Desktop\__PATH_TO_WORKSPACE__\packages\backend\build\app.js:5597:1)
package: [1]     at __webpack_require__ (D:\Desktop\__PATH_TO_WORKSPACE__\packages\backend\build\app.js:36961:42)
package: [1]     at eval (webpack-internal:///../../node_modules/@sentry/node/esm/index.js:131:83)
package: [1]     at ../../node_modules/@sentry/node/esm/index.js (D:\Desktop\__PATH_TO_WORKSPACE__\packages\backend\build\app.js:5289:1)
package: [1]     at __webpack_require__ (D:\Desktop\__PATH_TO_WORKSPACE__\packages\backend\build\app.js:36961:42)
package: [1]     at eval (webpack-internal:///../../node_modules/@sentry/electron/esm/main/index.js:75:71)
package: [1]     at ../../node_modules/@sentry/electron/esm/main/index.js (D:\Desktop\__PATH_TO_WORKSPACE__\packages\backend\build\app.js:34561:1)
package: [1]     at __webpack_require__ (D:\Desktop\__PATH_TO_WORKSPACE__\packages\backend\build\app.js:36961:42)
package: [1]     at eval (webpack-internal:///./src/OXZPrompt/OXZQueue.ts:14:74)
package: [1]     at ./src/OXZPrompt/OXZQueue.ts (D:\Desktop\__PATH_TO_WORKSPACE__\packages\backend\build\app.js:6901:1)
package: [1]     at __webpack_require__ (D:\Desktop\__PATH_TO_WORKSPACE__\packages\backend\build\app.js:36961:42)
package: [1]     at eval (webpack-internal:///./src/OXZPrompt/FileWatcher.ts:6:67)
package: [1]     at ./src/OXZPrompt/FileWatcher.ts (D:\Desktop\__PATH_TO_WORKSPACE__\packages\backend\build\app.js:6890:1)

[timfish]

I'm not 100% sure what's happening here without seeing more of the app config and code.

It looks like the code is being loaded as CJS but it has imports in it (ie. Cannot use import statement outside a module). If the output file has an .mjs extension, Electron will load is as ESM.

Are they trying to bundle the main process code to ESM or CJS? Webpack doesn't have great ESM output support and It's currently behind an experimental flag.

My guess is that they're attempting to target ESM with TypeScript, Webpack is outputting CJS and because the output file extension is .js, Electron is assuming it's all CJS even though it's not. If this is the case, setting the TypeScript output to CommonJs should fix this.

[timfish]

There is a beta available of v5 of the Electron SDK which uses v8 of the JavaScript SDKs. There is much improved ESM support.

[timfish]

v5.0.0 of the Electron SDK has now been released which uses v8 of the JavaScript SDKs with improved ESM support.

Feel free to re-open this or a new issue if problems still persist!