fix(esbuild): Don't override user code with proxy module (#322)

Author: Luca Forstner

packages/bundler-plugin-core/src/index.ts

@@ -203,6 +203,8 @@ export function sentryUnpluginFactory({
       );
     }
 
+    plugins.push(debugIdInjectionPlugin());
+
     if (!options.authToken) {
       logger.warn(
         "No auth token provided. Will not upload source maps. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/"
@@ -216,7 +218,6 @@ export function sentryUnpluginFactory({
         "No project provided. Will not upload source maps. Please set the `project` option to your Sentry project slug."
       );
     } else {
-      plugins.push(debugIdInjectionPlugin());
       plugins.push(
         debugIdUploadPlugin(
           createDebugIdUploadFunction({

packages/esbuild-plugin/src/index.ts

@@ -58,6 +58,13 @@ function esbuildDebugIdInjectionPlugin(): UnpluginOptions {
                 originalPath: args.path,
                 originalResolveDir: args.resolveDir,
               },
+              // We need to add a suffix here, otherwise esbuild will mark the entrypoint as resolved and won't traverse
+              // the module tree any further down past the proxy module because we're essentially creating a dependency
+              // loop back to the proxy module.
+              // By setting a suffix we're telling esbuild that the entrypoint and proxy module are two different things,
+              // making it re-resolve the entrypoint when it is imported from the proxy module.
+              // Super confusing? Yes. Works? Apparently... Let's see.
+              suffix: "?sentryProxyModule=true",
             };
           }
         });

packages/integration-tests/fixtures/basic-release-injection/setup.ts

@@ -5,5 +5,6 @@ const entryPointPath = path.resolve(__dirname, "input", "entrypoint.js");
 const outputDir = path.resolve(__dirname, "out");
 
 createCjsBundles({ index: entryPointPath }, outputDir, {
+  telemetry: false,
   release: { name: "I AM A RELEASE!", create: false },
 });

packages/integration-tests/fixtures/build-information-injection/setup.ts

@@ -8,5 +8,6 @@ createCjsBundles({ index: entryPointPath }, outputDir, {
   release: {
     name: "build-information-injection-test",
   },
+  telemetry: false,
   _experiments: { injectBuildInformation: true },
 });

packages/integration-tests/fixtures/disabled-release-injection/setup.ts

@@ -5,6 +5,7 @@ const entryPointPath = path.resolve(__dirname, "input", "entrypoint.js");
 const outputDir = path.resolve(__dirname, "out");
 
 createCjsBundles({ index: entryPointPath }, outputDir, {
+  telemetry: false,
   release: { name: "I AM A RELEASE!", inject: false, create: false },
   project: "releasesProject",
   org: "releasesOrg",

packages/integration-tests/fixtures/dont-mess-up-user-code/dont-mess-up-user-code.test.ts

@@ -0,0 +1,40 @@
+import childProcess from "child_process";
+import path from "path";
+import { testIfNodeMajorVersionIsLessThan18 } from "../../utils/testIf";
+
+/**
+ * Runs a node file in a seprate process.
+ *
+ * @param bundlePath Path of node file to run
+ * @returns Stdout of the process
+ */
+function checkBundle(bundlePath: string): void {
+  const processOutput = childProcess.execSync(`node ${bundlePath}`, { encoding: "utf-8" });
+  expect(processOutput).toMatch("I am import!");
+  expect(processOutput).toMatch("I am index!");
+}
+
+test("esbuild bundle", () => {
+  expect.assertions(2);
+  checkBundle(path.join(__dirname, "out", "esbuild", "index.js"));
+});
+
+test("rollup bundle", () => {
+  expect.assertions(2);
+  checkBundle(path.join(__dirname, "out", "rollup", "index.js"));
+});
+
+test("vite bundle", () => {
+  expect.assertions(2);
+  checkBundle(path.join(__dirname, "out", "vite", "index.js"));
+});
+
+testIfNodeMajorVersionIsLessThan18("webpack 4 bundle", () => {
+  expect.assertions(2);
+  checkBundle(path.join(__dirname, "out", "webpack4", "index.js"));
+});
+
+test("webpack 5 bundle", () => {
+  expect.assertions(2);
+  checkBundle(path.join(__dirname, "out", "webpack5", "index.js"));
+});

packages/integration-tests/fixtures/dont-mess-up-user-code/input/import.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line no-console
+console.log("I am import!");
+
+export {};

packages/integration-tests/fixtures/dont-mess-up-user-code/input/index.js

@@ -0,0 +1,4 @@
+import "./import";
+
+// eslint-disable-next-line no-console
+console.log("I am index!");

packages/integration-tests/fixtures/dont-mess-up-user-code/setup.ts

@@ -0,0 +1,12 @@
+import * as path from "path";
+import { createCjsBundles } from "../../utils/create-cjs-bundles";
+
+const entryPointPath = path.resolve(__dirname, "input", "index.js");
+const outputDir = path.resolve(__dirname, "out");
+
+createCjsBundles({ index: entryPointPath }, outputDir, {
+  telemetry: false,
+  release: { name: "I am release!", create: false },
+  project: "releasesProject",
+  org: "releasesOrg",
+});