ref(webpack): Use webpack peer dependency (#273)

Author: Luca Forstner

packages/e2e-tests/package.json

@@ -28,16 +28,16 @@
     "@types/axios": "^0.14.0",
     "@types/glob": "8.0.0",
     "@types/jest": "^28.1.3",
-    "@types/webpack4": "npm:@types/webpack@4.41.32",
+    "@types/webpack4": "npm:@types/webpack@^4",
     "esbuild": "0.14.49",
     "eslint": "^8.18.0",
     "glob": "8.0.3",
     "jest": "^28.1.3",
     "rollup": "2.77.0",
     "ts-node": "^10.9.1",
     "vite": "3.0.0",
-    "webpack": "5.74.0",
-    "webpack4": "npm:webpack@4.46.0"
+    "webpack5": "npm:webpack@5.74.0",
+    "webpack4": "npm:webpack@^4"
   },
   "volta": {
     "extends": "../../package.json"

packages/e2e-tests/utils/create-cjs-bundles.ts

@@ -2,7 +2,7 @@ import * as vite from "vite";
 import * as path from "path";
 import * as rollup from "rollup";
 import { default as webpack4 } from "webpack4";
-import { webpack as webpack5 } from "webpack";
+import { webpack as webpack5 } from "webpack5";
 import * as esbuild from "esbuild";
 
 import type { Options } from "@sentry/bundler-plugin-core";

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

@@ -19,10 +19,10 @@ function checkBundle(bundlePath: string): void {
         "esbuild",
         "rollup",
         "vite",
-        "webpack",
         "webpack4",
+        "webpack5",
       ]) as string[],
-      depsVersions: { rollup: 3, vite: 3, webpack: 5 },
+      depsVersions: { rollup: 3, vite: 3 },
       // This will differ based on what env this is run on
       nodeVersion: expectedNodeVersion,
     })

packages/integration-tests/package.json

@@ -24,15 +24,15 @@
     "@sentry/webpack-plugin": "2.1.0",
     "@swc/jest": "^0.2.21",
     "@types/jest": "^28.1.3",
-    "@types/webpack4": "npm:@types/webpack@4.41.32",
+    "@types/webpack4": "npm:@types/webpack@^4",
     "esbuild": "0.14.49",
     "eslint": "^8.18.0",
     "jest": "^28.1.3",
     "rollup": "3.2.0",
     "ts-node": "^10.9.1",
     "vite": "3.0.0",
-    "webpack": "5.74.0",
-    "webpack4": "npm:webpack@4.46.0"
+    "webpack5": "npm:webpack@5.74.0",
+    "webpack4": "npm:webpack@^4"
   },
   "volta": {
     "extends": "../../package.json"

packages/integration-tests/utils/create-cjs-bundles.ts

@@ -2,7 +2,7 @@ import * as vite from "vite";
 import * as path from "path";
 import * as rollup from "rollup";
 import { default as webpack4 } from "webpack4";
-import { webpack as webpack5 } from "webpack";
+import { webpack as webpack5 } from "webpack5";
 import * as esbuild from "esbuild";
 import { Options } from "@sentry/bundler-plugin-core";
 import { sentryVitePlugin } from "@sentry/vite-plugin";

packages/playground/build-webpack5.js

@@ -1,6 +1,6 @@
 // @ts-check
 const path = require("path");
-const webpack5 = require("webpack");
+const webpack5 = require("webpack5");
 const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");
 
 webpack5(

packages/playground/package.json

@@ -28,7 +28,7 @@
     "http-proxy": "^1.18.1",
     "rollup": "3.2.0",
     "vite": "3.0.0",
-    "webpack": "5.74.0",
+    "webpack5": "npm:webpack@5",
     "webpack4": "npm:webpack@4.46.0"
   },
   "volta": {

packages/webpack-plugin/package.json

@@ -50,8 +50,7 @@
   "dependencies": {
     "@sentry/bundler-plugin-core": "2.1.0",
     "unplugin": "1.0.1",
-    "uuid": "^9.0.0",
-    "webpack-4": "npm:webpack@^4"
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.18.5",
@@ -66,12 +65,17 @@
     "@types/jest": "^28.1.3",
     "@types/node": "^18.6.3",
     "@types/uuid": "^9.0.1",
+    "@types/webpack": "npm:@types/webpack@^4",
     "eslint": "^8.18.0",
     "jest": "^28.1.1",
     "rimraf": "^3.0.2",
     "rollup": "2.75.7",
     "ts-node": "^10.9.1",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "webpack": "npm:webpack@^4"
+  },
+  "peerDependencies": {
+    "webpack": ">=4"
   },
   "volta": {
     "extends": "../../package.json"

packages/webpack-plugin/rollup.config.js

@@ -9,7 +9,7 @@ const extensions = [".ts"];
 
 export default {
   input,
-  external: [...Object.keys(packageJson.dependencies), ...modulePackage.builtinModules],
+  external: [...Object.keys(packageJson.dependencies), ...modulePackage.builtinModules, "webpack"],
   onwarn: (warning) => {
     throw new Error(warning.message); // Warnings are usually high-consequence for us so let's throw to catch them
   },

packages/webpack-plugin/src/index.ts

@@ -4,31 +4,26 @@ import { UnpluginOptions } from "unplugin";
 import { v4 as uuidv4 } from "uuid";
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore No typedefs for webpack 4
-import { BannerPlugin as Webpack4BannerPlugin } from "webpack-4";
+// @ts-ignore webpack is a peer dep
+import * as webback4or5 from "webpack";
 
 function webpackReleaseInjectionPlugin(injectionCode: string): UnpluginOptions {
   return {
     name: "sentry-webpack-release-injection-plugin",
     webpack(compiler) {
-      if (compiler?.webpack?.BannerPlugin) {
-        compiler.options.plugins.push(
-          new compiler.webpack.BannerPlugin({
-            raw: true,
-            include: /\.(js|ts|jsx|tsx|mjs|cjs)$/,
-            banner: injectionCode,
-          })
-        );
-      } else {
-        compiler.options.plugins.push(
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-call
-          new Webpack4BannerPlugin({
-            raw: true,
-            include: /\.(js|ts|jsx|tsx|mjs|cjs)$/,
-            banner: injectionCode,
-          })
-        );
-      }
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore webpack version compatibility shenanigans
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+      const BannerPlugin = compiler?.webpack?.BannerPlugin || webback4or5?.BannerPlugin;
+      compiler.options.plugins = compiler.options.plugins || [];
+      compiler.options.plugins.push(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-call
+        new BannerPlugin({
+          raw: true,
+          include: /\.(js|ts|jsx|tsx|mjs|cjs)$/,
+          banner: injectionCode,
+        })
+      );
     },
   };
 }
@@ -37,24 +32,19 @@ function webpackDebugIdInjectionPlugin(): UnpluginOptions {
   return {
     name: "sentry-webpack-debug-id-injection-plugin",
     webpack(compiler) {
-      if (compiler?.webpack?.BannerPlugin) {
-        compiler.options.plugins.push(
-          new compiler.webpack.BannerPlugin({
-            raw: true,
-            include: /\.(js|ts|jsx|tsx|mjs|cjs)$/,
-            banner: () => getDebugIdSnippet(uuidv4()),
-          })
-        );
-      } else {
-        compiler.options.plugins.push(
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-call
-          new Webpack4BannerPlugin({
-            raw: true,
-            include: /\.(js|ts|jsx|tsx|mjs|cjs)$/,
-            banner: () => getDebugIdSnippet(uuidv4()),
-          })
-        );
-      }
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore webpack version compatibility shenanigans
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+      const BannerPlugin = compiler?.webpack?.BannerPlugin || webback4or5?.BannerPlugin;
+      compiler.options.plugins = compiler.options.plugins || [];
+      compiler.options.plugins.push(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-call
+        new BannerPlugin({
+          raw: true,
+          include: /\.(js|ts|jsx|tsx|mjs|cjs)$/,
+          banner: () => getDebugIdSnippet(uuidv4()),
+        })
+      );
     },
   };
 }
@@ -66,10 +56,11 @@ function webpackDebugIdUploadPlugin(
   return {
     name: pluginName,
     webpack(compiler) {
-      compiler.hooks.afterEmit.tapAsync(pluginName, (compilation, callback) => {
-        const outputPath = compilation.outputOptions.path ?? path.resolve();
-        const buildArtifacts = Object.keys(compilation.assets).map((asset) =>
-          path.join(outputPath, asset)
+      compiler.hooks.afterEmit.tapAsync(pluginName, (compilation, callback: () => void) => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        const outputPath = (compilation.outputOptions.path as string | undefined) ?? path.resolve();
+        const buildArtifacts = Object.keys(compilation.assets as Record<string, unknown>).map(
+          (asset) => path.join(outputPath, asset)
         );
         void upload(buildArtifacts).then(() => {
           callback();