[DevTools] webpack 5 + ignore listing backend to avoid confusion

packages/react-devtools-extensions/package.json

@@ -38,6 +38,7 @@
     "chrome-launch": "^1.1.4",
     "crx": "^5.0.0",
     "css-loader": "^1.0.1",
+    "devtools-ignore-webpack-plugin": "^0.1.0",
     "file-loader": "^6.1.0",
     "filesize": "^6.0.1",
     "find": "^0.3.0",
@@ -58,10 +59,10 @@
     "source-map-js": "^0.6.2",
     "sourcemap-codec": "^1.4.8",
     "style-loader": "^0.23.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
-    "workerize-loader": "^1.3.0"
+    "webpack": "^5.76.3",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.1",
+    "workerize-loader": "^2.0.2"
   },
   "dependencies": {
     "web-ext": "^4"

packages/react-devtools-extensions/webpack.backend.js

@@ -2,6 +2,7 @@
 
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
+const DevToolsIgnorePlugin = require('devtools-ignore-webpack-plugin');
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
   DARK_MODE_DIMMED_ERROR_COLOR,
@@ -36,7 +37,9 @@ const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
-  devtool: __DEV__ ? 'cheap-module-source-map' : false,
+  // include empty source maps for production to enable ignore listing
+  // so that Chrome DevTools doesn't show our code in error stack traces
+  devtool: __DEV__ ? 'cheap-module-source-map' : 'nosources-cheap-source-map',
   entry: {
     backend: './src/backend.js',
   },
@@ -45,12 +48,7 @@ module.exports = {
     filename: 'react_devtools_backend.js',
   },
   node: {
-    // Don't define a polyfill on window.setImmediate
-    setImmediate: false,
-
-    // source-maps package has a dependency on 'fs'
-    // but this build won't trigger that code path
-    fs: 'empty',
+    global: false,
   },
   resolve: {
     alias: {
@@ -80,6 +78,15 @@ module.exports = {
       'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
       'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
+    new DevToolsIgnorePlugin({
+      shouldIgnorePath: function (path) {
+        // ignore everything for production
+        if (!__DEV__) {
+          return true;
+        }
+        return path.includes('/node_modules/') || path.includes('/webpack/');
+      },
+    }),
   ],
   module: {
     rules: [

packages/react-devtools-extensions/webpack.config.js

@@ -64,12 +64,7 @@ module.exports = {
     chunkFilename: '[name].chunk.js',
   },
   node: {
-    // Don't define a polyfill on window.setImmediate
-    setImmediate: false,
-
-    // source-maps package has a dependency on 'fs'
-    // but this build won't trigger that code path
-    fs: 'empty',
+    global: false,
   },
   resolve: {
     alias: {

packages/react-devtools-inline/package.json

@@ -42,9 +42,9 @@
     "file-loader": "^6.1.0",
     "raw-loader": "^3.1.0",
     "style-loader": "^0.23.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
-    "worker-loader": "^3.0.3"
+    "webpack": "^5.76.3",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.1",
+    "workerize-loader": "^2.0.2"
   }
 }

packages/react-devtools-inline/webpack.config.js

@@ -45,8 +45,9 @@ module.exports = {
     path: __dirname + '/dist',
     filename: '[name].js',
     chunkFilename: '[name].chunk.js',
-    library: '[name]',
-    libraryTarget: 'commonjs2',
+    library: {
+      type: 'commonjs2',
+    }
   },
   externals: {
     react: 'react',
@@ -56,9 +57,7 @@ module.exports = {
     scheduler: 'scheduler',
   },
   node: {
-    // source-maps package has a dependency on 'fs'
-    // but this build won't trigger that code path
-    fs: 'empty',
+    global: false,
   },
   resolve: {
     alias: {
@@ -75,6 +74,7 @@ module.exports = {
       __EXTENSION__: false,
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
+      'process.env.BABEL_TYPES_8_BREAKING': false,
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-inline"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,

packages/react-devtools-shell/package.json

@@ -3,7 +3,7 @@
   "name": "react-devtools-shell",
   "version": "0.0.0",
   "scripts": {
-    "start": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server"
+    "start": "cross-env NODE_ENV=development cross-env TARGET=local node ./webpack-server.js"
   },
   "dependencies": {
     "immutable": "^4.0.0-rc.12",
@@ -25,8 +25,8 @@
     "css-loader": "^1.0.1",
     "raw-loader": "^3.1.0",
     "style-loader": "^0.23.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack": "^5.76.3",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.1"
   }
 }

packages/react-devtools-shell/src/e2e-regression/devtools.js

@@ -46,7 +46,13 @@ function init(appIframe, devtoolsContainer, appSource) {
 const iframe = document.getElementById('iframe');
 const devtoolsContainer = document.getElementById('devtools');
 
-init(iframe, devtoolsContainer, 'dist/e2e-app-regression.js');
+const {protocol, hostname} = window.location;
+const port = 8181; // secondary webpack server port
+init(
+  iframe,
+  devtoolsContainer,
+  `${protocol}//${hostname}:${port}/dist/e2e-app-regression.js`,
+);
 
 // ReactDOM Test Selector APIs used by Playwright e2e tests
 window.parent.REACT_DOM_DEVTOOLS = ReactDOM;

packages/react-devtools-shell/webpack.config.js → packages/react-devtools-shell/webpack-server.js

@@ -1,5 +1,6 @@
 const {resolve} = require('path');
-const {DefinePlugin} = require('webpack');
+const Webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
 const fs = require('fs');
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
@@ -61,11 +62,13 @@ const makeConfig = (entry, alias) => {
   const config = {
     mode: __DEV__ ? 'development' : 'production',
     devtool: __DEV__ ? 'cheap-source-map' : 'source-map',
+    stats: TARGET === 'local' ? 'errors-only' : 'normal',
     entry,
+    output: {
+      publicPath: '/dist/',
+    },
     node: {
-      // source-maps package has a dependency on 'fs'
-      // but this build won't trigger that code path
-      fs: 'empty',
+      global: false,
     },
     resolve: {
       alias,
@@ -74,7 +77,7 @@ const makeConfig = (entry, alias) => {
       minimize: false,
     },
     plugins: [
-      new DefinePlugin({
+      new Webpack.DefinePlugin({
         __DEV__,
         __EXPERIMENTAL__: true,
         __EXTENSION__: false,
@@ -127,22 +130,6 @@ const makeConfig = (entry, alias) => {
     },
   };
 
-  if (TARGET === 'local') {
-    // Local dev server build.
-    config.devServer = {
-      hot: true,
-      port: 8080,
-      clientLogLevel: 'warning',
-      publicPath: '/dist/',
-      stats: 'errors-only',
-    };
-  } else {
-    // Static build to deploy somewhere else.
-    config.output = {
-      path: resolve(__dirname, 'dist'),
-      filename: '[name].js',
-    };
-  }
   return config;
 };
 
@@ -200,4 +187,46 @@ const e2eRegressionApp = semver.lt(REACT_VERSION, '18.0.0')
       },
     );
 
-module.exports = [app, e2eRegressionApp];
+const appCompiler = Webpack(app);
+const appServer = new WebpackDevServer(
+  {
+    hot: true,
+    open: true,
+    port: 8080,
+    client: {
+      logging: 'warn',
+    },
+    static: {
+      directory: __dirname,
+      publicPath: '/',
+    },
+  },
+  appCompiler,
+);
+
+const regAppCompiler = Webpack(e2eRegressionApp);
+const regAppServer = new WebpackDevServer(
+  {
+    hot: true,
+    port: 8181,
+    client: {
+      logging: 'warn',
+    },
+    static: [
+      {
+        publicPath: '/dist',
+      },
+    ],
+  },
+  regAppCompiler,
+);
+
+const runServer = async () => {
+  console.log('Starting server...');
+  await regAppServer.start();
+  await appServer.start();
+};
+
+runServer();
+
+// module.exports = [app, e2eRegressionApp];

packages/react-devtools-timeline/package.json

@@ -23,9 +23,9 @@
     "style-loader": "^1.2.1",
     "url-loader": "^4.1.0",
     "vercel": "^20.1.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "worker-loader": "^3.0.2"
+    "webpack": "^5.76.3",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.1",
+    "workerize-loader": "^2.0.2"
   }
 }