chore[devtools]: upgrade to webpack v5 (#26887)

## Summary
- Updated `webpack` (and all related packages) to v5 in
`react-devtools-*` packages.
- I haven't touched any `TODO (Webpack 5)`. Tried to poke it, but each
my attempt failed and parsing hook names feature stopped working. I will
work on this in a separate PR.
- This work is one of prerequisites for updating Firefox extension to
manifests v3

related PRs:
https://github.com/facebook/react/pull/22267
https://github.com/facebook/react/pull/26506

## How did you test this change?
Tested on all surfaces, explicitly checked that parsing hook names
feature still works.

packages/react-devtools-core/src/standalone.js

@@ -299,8 +299,8 @@ type LoggerOptions = {
 };
 
 function startServer(
-  port?: number = 8097,
-  host?: string = 'localhost',
+  port: number = 8097,
+  host: string = 'localhost',
   httpsOptions?: ServerOptions,
   loggerOptions?: LoggerOptions,
 ): {close(): void} {

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

@@ -1,5 +1,5 @@
 const {resolve} = require('path');
-const {DefinePlugin} = require('webpack');
+const Webpack = require('webpack');
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
   DARK_MODE_DIMMED_ERROR_COLOR,
@@ -62,10 +62,13 @@ module.exports = {
     },
   },
   node: {
-    fs: 'empty',
+    global: false,
   },
   plugins: [
-    new DefinePlugin({
+    new Webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+    new Webpack.DefinePlugin({
       __DEV__,
       __EXPERIMENTAL__: true,
       __EXTENSION__: false,

packages/react-devtools-core/webpack.standalone.js

@@ -1,5 +1,5 @@
 const {resolve} = require('path');
-const {DefinePlugin} = require('webpack');
+const Webpack = require('webpack');
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
   DARK_MODE_DIMMED_ERROR_COLOR,
@@ -75,9 +75,14 @@ module.exports = {
     // This would break the standalone DevTools ability to load the backend.
     // see https://github.com/facebook/react-devtools/issues/1269
     __dirname: false,
+
+    global: false,
   },
   plugins: [
-    new DefinePlugin({
+    new Webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+    new Webpack.DefinePlugin({
       __DEV__,
       __EXPERIMENTAL__: true,
       __EXTENSION__: false,

packages/react-devtools-extensions/build.js

@@ -56,14 +56,7 @@ const build = async (tempPath, manifestPath) => {
   const binPath = join(tempPath, 'bin');
   const zipPath = join(tempPath, 'zip');
 
-  const webpackPath = join(
-    __dirname,
-    '..',
-    '..',
-    'node_modules',
-    '.bin',
-    'webpack',
-  );
+  const webpackPath = join(__dirname, 'node_modules', '.bin', 'webpack');
   execSync(
     `${webpackPath} --config webpack.config.js --output-path ${binPath}`,
     {

packages/react-devtools-extensions/package.json

@@ -33,6 +33,7 @@
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.4",
     "babel-preset-minify": "^0.5.1",
+    "buffer": "^6.0.3",
     "chalk": "^4.1.1",
     "child-process-promise": "^2.2.1",
     "chrome-launch": "^1.1.4",
@@ -54,14 +55,15 @@
     "open": "^7.0.2",
     "os-name": "^3.1.0",
     "parse-filepath": "^1.0.2",
+    "process": "0.11.10",
     "raw-loader": "^3.1.0",
     "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.82.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0",
+    "workerize-loader": "^2.0.2"
   },
   "dependencies": {
     "web-ext": "^4"

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

@@ -1,7 +1,7 @@
 'use strict';
 
 const {resolve} = require('path');
-const {DefinePlugin} = require('webpack');
+const Webpack = require('webpack');
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
   DARK_MODE_DIMMED_ERROR_COLOR,
@@ -36,7 +36,7 @@ const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
-  devtool: __DEV__ ? 'cheap-module-source-map' : false,
+  devtool: __DEV__ ? 'cheap-module-source-map' : 'nosources-cheap-source-map',
   entry: {
     backend: './src/backend.js',
   },
@@ -45,12 +45,7 @@ module.exports = {
     filename: 'react_devtools_backend_compact.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: {
@@ -66,7 +61,10 @@ module.exports = {
     minimize: false,
   },
   plugins: [
-    new DefinePlugin({
+    new Webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+    new Webpack.DefinePlugin({
       __DEV__: true,
       __PROFILE__: false,
       __DEV____DEV__: true,

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

@@ -1,7 +1,7 @@
 'use strict';
 
 const {resolve} = require('path');
-const {DefinePlugin} = require('webpack');
+const Webpack = require('webpack');
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
   DARK_MODE_DIMMED_ERROR_COLOR,
@@ -66,12 +66,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: {
@@ -88,7 +83,11 @@ module.exports = {
     minimize: false,
   },
   plugins: [
-    new DefinePlugin({
+    new Webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+    new Webpack.DefinePlugin({
       __DEV__,
       __EXPERIMENTAL__: true,
       __EXTENSION__: true,

packages/react-devtools-inline/package.json

@@ -37,14 +37,16 @@
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.4",
+    "buffer": "^6.0.3",
     "cross-env": "^3.1.4",
     "css-loader": "^1.0.1",
     "file-loader": "^6.1.0",
+    "process": "^0.11.10",
     "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.82.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0",
+    "workerize-loader": "^2.0.2"
   }
 }

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

@@ -1,5 +1,5 @@
 const {resolve} = require('path');
-const {DefinePlugin} = require('webpack');
+const Webpack = require('webpack');
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
   DARK_MODE_DIMMED_ERROR_COLOR,
@@ -43,10 +43,12 @@ module.exports = {
   },
   output: {
     path: __dirname + '/dist',
+    publicPath: '/dist/',
     filename: '[name].js',
     chunkFilename: '[name].chunk.js',
-    library: '[name]',
-    libraryTarget: 'commonjs2',
+    library: {
+      type: 'commonjs2',
+    },
   },
   externals: {
     react: 'react',
@@ -56,9 +58,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: {
@@ -69,7 +69,11 @@ module.exports = {
     minimize: false,
   },
   plugins: [
-    new DefinePlugin({
+    new Webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+    new Webpack.DefinePlugin({
       __DEV__,
       __EXPERIMENTAL__: true,
       __EXTENSION__: false,

packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js

@@ -315,7 +315,7 @@ function extractAndLoadSourceMapJSON(
 
 function fetchFile(
   url: string,
-  markName?: string = 'fetchFile',
+  markName: string = 'fetchFile',
 ): Promise<string> {
   return withCallbackPerfMeasurements(`${markName}("${url}")`, done => {
     return new Promise((resolve, reject) => {

packages/react-devtools-shell/constants.js

@@ -0,0 +1,5 @@
+const SUCCESSFUL_COMPILATION_MESSAGE = 'Compiled successfully.';
+
+module.exports = {
+  SUCCESSFUL_COMPILATION_MESSAGE,
+};

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 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.82.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0"
   }
 }

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-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,
@@ -14,6 +15,8 @@ const {
 const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
 const semver = require('semver');
 
+const {SUCCESSFUL_COMPILATION_MESSAGE} = require('./constants');
+
 const ReactVersionSrc = fs.readFileSync(require.resolve('shared/ReactVersion'));
 const currentReactVersion = /export default '([^']+)';/.exec(
   ReactVersionSrc,
@@ -25,12 +28,6 @@ if (!NODE_ENV) {
   process.exit(1);
 }
 
-const TARGET = process.env.TARGET;
-if (!TARGET) {
-  console.error('TARGET not set');
-  process.exit(1);
-}
-
 const EDITOR_URL = process.env.EDITOR_URL || null;
 
 const builtModulesDir = resolve(
@@ -57,15 +54,16 @@ const E2E_APP_BUILD_DIR = process.env.REACT_VERSION
   ? resolve(__dirname, '..', '..', 'build-regression', 'node_modules')
   : builtModulesDir;
 
-const makeConfig = (entry, alias) => {
-  const config = {
+const makeConfig = (entry, alias) => ({
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-source-map' : 'source-map',
+  stats: '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 +72,10 @@ const makeConfig = (entry, alias) => {
     minimize: false,
   },
   plugins: [
-      new DefinePlugin({
+    new Webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+    new Webpack.DefinePlugin({
       __DEV__,
       __EXPERIMENTAL__: true,
       __EXTENSION__: false,
@@ -125,26 +126,7 @@ 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;
-};
+});
 
 const app = makeConfig(
   {
@@ -200,4 +182,49 @@ 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 e2eRegressionAppCompiler = Webpack(e2eRegressionApp);
+const e2eRegressionAppServer = new WebpackDevServer(
+  {
+    port: 8181,
+    client: {
+      logging: 'warn',
+    },
+    static: {
+      publicPath: '/dist/',
+    },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  },
+  e2eRegressionAppCompiler,
+);
+
+const runServer = async () => {
+  console.log('Starting server...');
+
+  appServer.compiler.hooks.done.tap('done', () =>
+    console.log(SUCCESSFUL_COMPILATION_MESSAGE),
+  );
+
+  await e2eRegressionAppServer.start();
+  await appServer.start();
+};
+
+runServer();

packages/react-devtools-timeline/package.json

@@ -19,13 +19,11 @@
     "babel-loader": "^8.1.0",
     "css-loader": "^4.2.1",
     "file-loader": "^6.0.0",
-    "html-webpack-plugin": "^4.3.0",
     "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.82.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0"
   }
 }

scripts/circleci/run_devtools_e2e_tests.js

@@ -11,6 +11,11 @@ const inlinePackagePath = join(ROOT_PATH, 'packages', 'react-devtools-inline');
 const shellPackagePath = join(ROOT_PATH, 'packages', 'react-devtools-shell');
 const screenshotPath = join(ROOT_PATH, 'tmp', 'screenshots');
 
+const {SUCCESSFUL_COMPILATION_MESSAGE} = require(join(
+  shellPackagePath,
+  'constants.js'
+));
+
 let buildProcess = null;
 let serverProcess = null;
 let testProcess = null;
@@ -85,7 +90,7 @@ function runTestShell() {
   }
 
   serverProcess.stdout.on('data', data => {
-    if (`${data}`.includes('Compiled successfully.')) {
+    if (`${data}`.includes(SUCCESSFUL_COMPILATION_MESSAGE)) {
       logBright('Testing shell server running');
 
       clearTimeout(timeoutID);
@@ -93,6 +98,7 @@ function runTestShell() {
       runEndToEndTests();
     }
   });
+
   serverProcess.stderr.on('data', data => {
     if (`${data}`.includes('EADDRINUSE')) {
       // Something is occupying this port;