Skip to content

Commit 850de7f

Browse files
hoxyqhoxyq
committed
chore[devtools]: upgrade to webpack v5
1 parent f5c249d commit 850de7f

File tree

17 files changed

+1207
-1350
lines changed

17 files changed

+1207
-1350
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -299,8 +299,8 @@ type LoggerOptions = {
299299
};
300300

301301
function startServer(
302-
port?: number = 8097,
303-
host?: string = 'localhost',
302+
port: number = 8097,
303+
host: string = 'localhost',
304304
httpsOptions?: ServerOptions,
305305
loggerOptions?: LoggerOptions,
306306
): {close(): void} {

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const {resolve} = require('path');
2-
const {DefinePlugin} = require('webpack');
2+
const Webpack = require('webpack');
33
const {
44
DARK_MODE_DIMMED_WARNING_COLOR,
55
DARK_MODE_DIMMED_ERROR_COLOR,
@@ -62,10 +62,13 @@ module.exports = {
6262
},
6363
},
6464
node: {
65-
fs: 'empty',
65+
global: false,
6666
},
6767
plugins: [
68-
new DefinePlugin({
68+
new Webpack.ProvidePlugin({
69+
process: 'process/browser',
70+
}),
71+
new Webpack.DefinePlugin({
6972
__DEV__,
7073
__EXPERIMENTAL__: true,
7174
__EXTENSION__: false,

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const {resolve} = require('path');
2-
const {DefinePlugin} = require('webpack');
2+
const Webpack = require('webpack');
33
const {
44
DARK_MODE_DIMMED_WARNING_COLOR,
55
DARK_MODE_DIMMED_ERROR_COLOR,
@@ -75,9 +75,14 @@ module.exports = {
7575
// This would break the standalone DevTools ability to load the backend.
7676
// see https://github.com/facebook/react-devtools/issues/1269
7777
__dirname: false,
78+
79+
global: false,
7880
},
7981
plugins: [
80-
new DefinePlugin({
82+
new Webpack.ProvidePlugin({
83+
process: 'process/browser',
84+
}),
85+
new Webpack.DefinePlugin({
8186
__DEV__,
8287
__EXPERIMENTAL__: true,
8388
__EXTENSION__: false,

‎packages/react-devtools-extensions/build.js

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,7 @@ const build = async (tempPath, manifestPath) => {
5656
const binPath = join(tempPath, 'bin');
5757
const zipPath = join(tempPath, 'zip');
5858

59-
const webpackPath = join(
60-
__dirname,
61-
'..',
62-
'..',
63-
'node_modules',
64-
'.bin',
65-
'webpack',
66-
);
59+
const webpackPath = join(__dirname, 'node_modules', '.bin', 'webpack');
6760
execSync(
6861
`${webpackPath} --config webpack.config.js --output-path ${binPath}`,
6962
{

‎packages/react-devtools-extensions/package.json

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"babel-eslint": "^9.0.0",
3434
"babel-loader": "^8.0.4",
3535
"babel-preset-minify": "^0.5.1",
36+
"buffer": "^6.0.3",
3637
"chalk": "^4.1.1",
3738
"child-process-promise": "^2.2.1",
3839
"chrome-launch": "^1.1.4",
@@ -54,14 +55,15 @@
5455
"open": "^7.0.2",
5556
"os-name": "^3.1.0",
5657
"parse-filepath": "^1.0.2",
58+
"process": "0.11.10",
5759
"raw-loader": "^3.1.0",
5860
"source-map-js": "^0.6.2",
5961
"sourcemap-codec": "^1.4.8",
6062
"style-loader": "^0.23.1",
61-
"webpack": "^4.43.0",
62-
"webpack-cli": "^3.3.11",
63-
"webpack-dev-server": "^3.10.3",
64-
"workerize-loader": "^1.3.0"
63+
"webpack": "^5.82.1",
64+
"webpack-cli": "^5.1.1",
65+
"webpack-dev-server": "^4.15.0",
66+
"workerize-loader": "^2.0.2"
6567
},
6668
"dependencies": {
6769
"web-ext": "^4"

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use strict';
22

33
const {resolve} = require('path');
4-
const {DefinePlugin} = require('webpack');
4+
const Webpack = require('webpack');
55
const {
66
DARK_MODE_DIMMED_WARNING_COLOR,
77
DARK_MODE_DIMMED_ERROR_COLOR,
@@ -36,7 +36,7 @@ const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
3636

3737
module.exports = {
3838
mode: __DEV__ ? 'development' : 'production',
39-
devtool: __DEV__ ? 'cheap-module-source-map' : false,
39+
devtool: __DEV__ ? 'cheap-module-source-map' : 'nosources-cheap-source-map',
4040
entry: {
4141
backend: './src/backend.js',
4242
},
@@ -45,12 +45,7 @@ module.exports = {
4545
filename: 'react_devtools_backend_compact.js',
4646
},
4747
node: {
48-
// Don't define a polyfill on window.setImmediate
49-
setImmediate: false,
50-
51-
// source-maps package has a dependency on 'fs'
52-
// but this build won't trigger that code path
53-
fs: 'empty',
48+
global: false,
5449
},
5550
resolve: {
5651
alias: {
@@ -66,7 +61,10 @@ module.exports = {
6661
minimize: false,
6762
},
6863
plugins: [
69-
new DefinePlugin({
64+
new Webpack.ProvidePlugin({
65+
process: 'process/browser',
66+
}),
67+
new Webpack.DefinePlugin({
7068
__DEV__: true,
7169
__PROFILE__: false,
7270
__DEV____DEV__: true,

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use strict';
22

33
const {resolve} = require('path');
4-
const {DefinePlugin} = require('webpack');
4+
const Webpack = require('webpack');
55
const {
66
DARK_MODE_DIMMED_WARNING_COLOR,
77
DARK_MODE_DIMMED_ERROR_COLOR,
@@ -66,12 +66,7 @@ module.exports = {
6666
chunkFilename: '[name].chunk.js',
6767
},
6868
node: {
69-
// Don't define a polyfill on window.setImmediate
70-
setImmediate: false,
71-
72-
// source-maps package has a dependency on 'fs'
73-
// but this build won't trigger that code path
74-
fs: 'empty',
69+
global: false,
7570
},
7671
resolve: {
7772
alias: {
@@ -88,7 +83,11 @@ module.exports = {
8883
minimize: false,
8984
},
9085
plugins: [
91-
new DefinePlugin({
86+
new Webpack.ProvidePlugin({
87+
process: 'process/browser',
88+
Buffer: ['buffer', 'Buffer'],
89+
}),
90+
new Webpack.DefinePlugin({
9291
__DEV__,
9392
__EXPERIMENTAL__: true,
9493
__EXTENSION__: true,

‎packages/react-devtools-inline/package.json

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,16 @@
3737
"babel-core": "^7.0.0-bridge",
3838
"babel-eslint": "^9.0.0",
3939
"babel-loader": "^8.0.4",
40+
"buffer": "^6.0.3",
4041
"cross-env": "^3.1.4",
4142
"css-loader": "^1.0.1",
4243
"file-loader": "^6.1.0",
44+
"process": "^0.11.10",
4345
"raw-loader": "^3.1.0",
4446
"style-loader": "^0.23.1",
45-
"webpack": "^4.43.0",
46-
"webpack-cli": "^3.3.11",
47-
"webpack-dev-server": "^3.10.3",
48-
"worker-loader": "^3.0.3"
47+
"webpack": "^5.82.1",
48+
"webpack-cli": "^5.1.1",
49+
"webpack-dev-server": "^4.15.0",
50+
"workerize-loader": "^2.0.2"
4951
}
5052
}

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const {resolve} = require('path');
2-
const {DefinePlugin} = require('webpack');
2+
const Webpack = require('webpack');
33
const {
44
DARK_MODE_DIMMED_WARNING_COLOR,
55
DARK_MODE_DIMMED_ERROR_COLOR,
@@ -43,10 +43,12 @@ module.exports = {
4343
},
4444
output: {
4545
path: __dirname + '/dist',
46+
publicPath: '/dist/',
4647
filename: '[name].js',
4748
chunkFilename: '[name].chunk.js',
48-
library: '[name]',
49-
libraryTarget: 'commonjs2',
49+
library: {
50+
type: 'commonjs2',
51+
},
5052
},
5153
externals: {
5254
react: 'react',
@@ -56,9 +58,7 @@ module.exports = {
5658
scheduler: 'scheduler',
5759
},
5860
node: {
59-
// source-maps package has a dependency on 'fs'
60-
// but this build won't trigger that code path
61-
fs: 'empty',
61+
global: false,
6262
},
6363
resolve: {
6464
alias: {
@@ -69,7 +69,11 @@ module.exports = {
6969
minimize: false,
7070
},
7171
plugins: [
72-
new DefinePlugin({
72+
new Webpack.ProvidePlugin({
73+
process: 'process/browser',
74+
Buffer: ['buffer', 'Buffer'],
75+
}),
76+
new Webpack.DefinePlugin({
7377
__DEV__,
7478
__EXPERIMENTAL__: true,
7579
__EXTENSION__: false,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -315,7 +315,7 @@ function extractAndLoadSourceMapJSON(
315315

316316
function fetchFile(
317317
url: string,
318-
markName?: string = 'fetchFile',
318+
markName: string = 'fetchFile',
319319
): Promise<string> {
320320
return withCallbackPerfMeasurements(`${markName}("${url}")`, done => {
321321
return new Promise((resolve, reject) => {

‎packages/react-devtools-shell/constants.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const SUCCESSFUL_COMPILATION_MESSAGE = 'Compiled successfully.';
2+
3+
module.exports = {
4+
SUCCESSFUL_COMPILATION_MESSAGE,
5+
};

‎packages/react-devtools-shell/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"name": "react-devtools-shell",
44
"version": "0.0.0",
55
"scripts": {
6-
"start": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server"
6+
"start": "cross-env NODE_ENV=development node ./webpack-server.js"
77
},
88
"dependencies": {
99
"immutable": "^4.0.0-rc.12",
@@ -25,8 +25,8 @@
2525
"css-loader": "^1.0.1",
2626
"raw-loader": "^3.1.0",
2727
"style-loader": "^0.23.1",
28-
"webpack": "^4.43.0",
29-
"webpack-cli": "^3.3.11",
30-
"webpack-dev-server": "^3.10.3"
28+
"webpack": "^5.82.1",
29+
"webpack-cli": "^5.1.1",
30+
"webpack-dev-server": "^4.15.0"
3131
}
3232
}

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,13 @@ function init(appIframe, devtoolsContainer, appSource) {
4646
const iframe = document.getElementById('iframe');
4747
const devtoolsContainer = document.getElementById('devtools');
4848

49-
init(iframe, devtoolsContainer, 'dist/e2e-app-regression.js');
49+
const {protocol, hostname} = window.location;
50+
const port = 8181; // secondary webpack server port
51+
init(
52+
iframe,
53+
devtoolsContainer,
54+
`${protocol}//${hostname}:${port}/dist/e2e-app-regression.js`,
55+
);
5056

5157
// ReactDOM Test Selector APIs used by Playwright e2e tests
5258
window.parent.REACT_DOM_DEVTOOLS = ReactDOM;

0 commit comments

Comments
 (0)