fix(webpack): make plugin inject ES5-friendly code

Sentry webpack plugin injects code that includes `let` that breaks in ES5-only environments.
`let` is substituted for `var` wrapped in an IIFE in order to keep the same scope for the declared variable.

Author: grushetsky

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

@@ -456,7 +456,7 @@ export function createComponentNameAnnotateHooks(ignoredComponents?: string[]):
 }
 
 export function getDebugIdSnippet(debugId: string): string {
-  return `;{try{let e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="${debugId}",e._sentryDebugIdIdentifier="sentry-dbid-${debugId}")}catch(e){}};`;
+  return `;{try{(function(){var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="${debugId}",e._sentryDebugIdIdentifier="sentry-dbid-${debugId}");})();}catch(e){}};`;
 }
 
 export type { Logger } from "./logger";

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

@@ -314,8 +314,8 @@ export function generateGlobalInjectorCode({
 }): string {
   // The code below is mostly ternary operators because it saves bundle size.
   // The checks are to support as many environments as possible. (Node.js, Browser, webworkers, etc.)
-  let code = `{
-    let _global =
+  let code = `(function(){
+    var _global =
       typeof window !== 'undefined' ?
         window :
         typeof global !== 'undefined' ?
@@ -335,7 +335,7 @@ export function generateGlobalInjectorCode({
       _global.SENTRY_BUILD_INFO=${JSON.stringify(buildInfo)};`;
   }
 
-  code += "}";
+  code += "})();";
 
   return code;
 }
@@ -345,8 +345,8 @@ export function generateModuleMetadataInjectorCode(metadata: any): string {
   // The code below is mostly ternary operators because it saves bundle size.
   // The checks are to support as many environments as possible. (Node.js, Browser, webworkers, etc.)
   // We are merging the metadata objects in case modules are bundled twice with the plugin
-  return `{
-  let _sentryModuleMetadataGlobal =
+  return `(function(){
+  var _sentryModuleMetadataGlobal =
     typeof window !== "undefined"
       ? window
       : typeof global !== "undefined"
@@ -366,7 +366,7 @@ export function generateModuleMetadataInjectorCode(metadata: any): string {
       _sentryModuleMetadataGlobal._sentryModuleMetadata[new _sentryModuleMetadataGlobal.Error().stack],
       ${JSON.stringify(metadata)}
     );
-}`;
+})();`;
 }
 
 export function getBuildInformation(): {

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

@@ -4,7 +4,7 @@ describe("getDebugIdSnippet", () => {
   it("returns the debugId injection snippet for a passed debugId", () => {
     const snippet = getDebugIdSnippet("1234");
     expect(snippet).toMatchInlineSnapshot(
-      `";{try{let e=\\"undefined\\"!=typeof window?window:\\"undefined\\"!=typeof global?global:\\"undefined\\"!=typeof globalThis?globalThis:\\"undefined\\"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]=\\"1234\\",e._sentryDebugIdIdentifier=\\"sentry-dbid-1234\\")}catch(e){}};"`
+      `";{try{(function(){var e=\\"undefined\\"!=typeof window?window:\\"undefined\\"!=typeof global?global:\\"undefined\\"!=typeof globalThis?globalThis:\\"undefined\\"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]=\\"1234\\",e._sentryDebugIdIdentifier=\\"sentry-dbid-1234\\");})();}catch(e){}};"`
     );
   });
 });

packages/bundler-plugin-core/test/utils.test.ts

@@ -220,8 +220,8 @@ describe("generateModuleMetadataInjectorCode", () => {
   it("generates code with empty metadata object", () => {
     const generatedCode = generateModuleMetadataInjectorCode({});
     expect(generatedCode).toMatchInlineSnapshot(`
-      "{
-        let _sentryModuleMetadataGlobal =
+      "(function(){
+        var _sentryModuleMetadataGlobal =
           typeof window !== \\"undefined\\"
             ? window
             : typeof global !== \\"undefined\\"
@@ -241,7 +241,7 @@ describe("generateModuleMetadataInjectorCode", () => {
             _sentryModuleMetadataGlobal._sentryModuleMetadata[new _sentryModuleMetadataGlobal.Error().stack],
             {}
           );
-      }"
+      })();"
     `);
   });
 
@@ -255,8 +255,8 @@ describe("generateModuleMetadataInjectorCode", () => {
       },
     });
     expect(generatedCode).toMatchInlineSnapshot(`
-      "{
-        let _sentryModuleMetadataGlobal =
+      "(function(){
+        var _sentryModuleMetadataGlobal =
           typeof window !== \\"undefined\\"
             ? window
             : typeof global !== \\"undefined\\"
@@ -276,7 +276,7 @@ describe("generateModuleMetadataInjectorCode", () => {
             _sentryModuleMetadataGlobal._sentryModuleMetadata[new _sentryModuleMetadataGlobal.Error().stack],
             {\\"file1.js\\":{\\"foo\\":\\"bar\\"},\\"file2.js\\":{\\"bar\\":\\"baz\\"}}
           );
-      }"
+      })();"
     `);
   });
 });