Fix preload injection and output package.json into esm directory

examples/electron-react-boilerplate/package.json

@@ -2,8 +2,8 @@
   "name": "electron-react-boilerplate",
   "scripts": {
     "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
-    "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
-    "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts"
+    "build:main": "cross-env NODE_ENV=production TS_NODE_PROJECT=tsconfig.json TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
+    "build:renderer": "cross-env NODE_ENV=production TS_NODE_PROJECT=tsconfig.json TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts"
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",

package.json

@@ -50,9 +50,9 @@
     "update-electron-versions": "electron-latest-versions --start 2 > ./test/e2e/versions.json",
     "update-sdk-versions": "node ./scripts/update-sdk-versions.mjs",
     "pretest": "yarn build",
-    "test": "cross-env TS_NODE_PROJECT=tsconfig.json xvfb-maybe electron-mocha --require ts-node/register/transpile-only --timeout 120000 ./test/unit/**/*.ts",
+    "test": "cross-env TS_NODE_PROJECT=tsconfig.test.json xvfb-maybe electron-mocha --require ts-node/register/transpile-only --timeout 120000 ./test/unit/**/*.ts",
     "pree2e": "rimraf test/e2e/dist/**/node_modules/@sentry/** test/e2e/dist/**/yarn.lock test/e2e/dist/**/package-lock.json && node scripts/clean-cache.js && yarn build && npm pack",
-    "e2e": "cross-env TS_NODE_PROJECT=tsconfig.json xvfb-maybe mocha --require ts-node/register/transpile-only --retries 3 ./test/e2e/*.ts"
+    "e2e": "cross-env TS_NODE_PROJECT=tsconfig.test.json xvfb-maybe mocha --require ts-node/register/transpile-only --retries 3 ./test/e2e/*.ts"
   },
   "dependencies": {
     "@sentry/browser": "7.68.0",

rollup.config.js

@@ -17,6 +17,18 @@ const outputOptions = {
   },
 };
 
+// a simple plugin that adds a package.json file with type: module
+const modulePackageJson = {
+  name: 'package-json-module-type',
+  generateBundle(_, __) {
+    this.emitFile({
+      type: 'asset',
+      fileName: 'package.json',
+      source: '{"type": "module"}',
+    });
+  },
+};
+
 function transpileFiles(format, input, outDir) {
   return {
     input,
@@ -32,6 +44,7 @@ function transpileFiles(format, input, outDir) {
         outDir,
         tsconfig: './tsconfig.build.json',
       }),
+      format === 'esm' ? modulePackageJson : {},
     ],
     external,
   };

src/main/integrations/preload-injection.ts

@@ -4,12 +4,34 @@ import { Integration } from '@sentry/types';
 import { logger } from '@sentry/utils';
 import { app } from 'electron';
 import { existsSync } from 'fs';
-import { isAbsolute } from 'path';
+import { isAbsolute, resolve } from 'path';
+import { fileURLToPath } from 'url';
 
 import { IPCMode } from '../../common';
 import { rendererRequiresCrashReporterStart } from '../electron-normalize';
 import { ElectronMainOptionsInternal } from '../sdk';
 
+// After bundling with webpack, require.resolve can return number so we include that in the types
+// to ensure we check for that!
+function getPreloadPath(): string | number | undefined {
+  try {
+    return rendererRequiresCrashReporterStart()
+      ? require.resolve('../../preload/legacy.js')
+      : require.resolve('../../preload/index.js');
+  } catch (_) {
+    try {
+      // This could be ESM
+      const currentDir = fileURLToPath(import.meta.url);
+      // Use the CJS preload
+      return resolve(currentDir, '..', '..', '..', '..', 'preload', 'index.js');
+    } catch (_) {
+      //
+    }
+  }
+
+  return undefined;
+}
+
 /**
  * Injects the preload script into the provided sessions.
  *
@@ -45,14 +67,7 @@ export class PreloadInjection implements Integration {
    * Attempts to add the preload script the the provided sessions
    */
   private _addPreloadToSessions(options: ElectronMainOptionsInternal): void {
-    let path = undefined;
-    try {
-      path = rendererRequiresCrashReporterStart()
-        ? require.resolve('../../preload/legacy.js')
-        : require.resolve('../../preload/index.js');
-    } catch (_) {
-      //
-    }
+    const path = getPreloadPath();
 
     if (path && typeof path === 'string' && isAbsolute(path) && existsSync(path)) {
       for (const sesh of options.getSessions()) {

tsconfig.json

@@ -1,9 +1,5 @@
 {
   "extends": "./tsconfig.build.json",
   "include": ["src/**/*.ts", "test/**/*.ts"],
-  "exclude": ["node_modules"],
-  "compilerOptions": {
-    "module": "CommonJS",
-    "rootDir": "."
-  }
+  "exclude": ["node_modules"]
 }

tsconfig.test.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.build.json",
+  "include": ["src/**/*.ts", "test/**/*.ts"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "module": "CommonJS",
+    "rootDir": "."
+  }
+}