chore[devtools]: upgrade to webpack v5

facebook · Jun 14, 2023 · 08095a2 · 08095a2
1 parent f5c249d
commit 08095a2
Show file tree

Hide file tree

Showing 17 changed files with 1,207 additions and 1,350 deletions.
diff --git a/packages/react-devtools-core/src/standalone.js b/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} {

diff --git a/packages/react-devtools-core/webpack.backend.js b/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,

diff --git a/packages/react-devtools-core/webpack.standalone.js b/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,

diff --git a/packages/react-devtools-extensions/build.js b/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}`,
  {

diff --git a/packages/react-devtools-extensions/package.json b/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"

diff --git a/packages/react-devtools-extensions/webpack.backend.js b/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,

diff --git a/packages/react-devtools-extensions/webpack.config.js b/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,

diff --git a/packages/react-devtools-inline/package.json b/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"
  }
 }
diff --git a/packages/react-devtools-inline/webpack.config.js b/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,

diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js b/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) => {

diff --git a/packages/react-devtools-shell/constants.js b/packages/react-devtools-shell/constants.js
@@ -0,0 +1,5 @@
+const SUCCESSFUL_COMPILATION_MESSAGE = 'Compiled successfully.';
+
+module.exports = {
+ SUCCESSFUL_COMPILATION_MESSAGE,
+};
diff --git a/packages/react-devtools-shell/package.json b/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"
  }
 }
diff --git a/packages/react-devtools-shell/src/e2e-regression/devtools.js b/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;