chore[devtools]: upgrade to webpack v5 #26887

hoxyq · 2023-06-01T15:57:13Z

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:
#22267
#26506

How did you test this change?

Tested on all surfaces, explicitly checked that parsing hook names feature still works.

react-sizebot · 2023-06-01T16:02:29Z

Comparing: f5c249d...8ade242

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	164.23 kB	164.23 kB	=	51.73 kB	51.72 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	171.67 kB	171.67 kB	=	53.97 kB	53.97 kB
facebook-www/ReactDOM-prod.classic.js	=	570.12 kB	570.12 kB	=	100.58 kB	100.58 kB
facebook-www/ReactDOM-prod.modern.js	=	553.90 kB	553.90 kB	=	97.75 kB	97.75 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 8ade242

hoxyq · 2023-06-05T10:29:14Z

packages/react-devtools-extensions/build.js

-    '.bin',
-    'webpack',
-  );
+  const webpackPath = join(__dirname, 'node_modules', '.bin', 'webpack');


Not sure why we were using webpack from root node_modules.

Updated to use it from react-devtools-extensions package, where webpack's version was updated. The root one is still using version 4.x.x.

hoxyq · 2023-06-05T10:39:48Z

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

+  appServer.compiler.hooks.done.tap('done', () =>
+    console.log(SUCCESSFUL_COMPILATION_MESSAGE),
+  );


This is the easiest way that I found on how to emit something (like an event) when webpack has compiled assets.

More scalable solution for it would be wrapping up in a Promise, but this server is being started via spawning node process in scripts/circleci/run_devtools_e2e_tests.js, so we need something like this ¯\_(ツ)_/¯

tyao1 · 2023-06-08T17:30:07Z

This work is one of prerequisites for updating Firefox extension to manifests v3

Just curious why it is for Firefox, and is it a prerequisite for Chrome extension?

tyao1 · 2023-06-08T17:36:21Z

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

@@ -25,12 +28,6 @@ if (!NODE_ENV) {
  process.exit(1);
 }

-const TARGET = process.env.TARGET;


Why is this removed?

Because its not needed, we are not building react-devtools-shell to static files, it is only used as a playground to test inline version of DevTools.

So the only target is local (to start dev-server)

hoxyq · 2023-06-08T18:04:53Z

This work is one of prerequisites for updating Firefox extension to manifests v3

Just curious why it is for Firefox, and is it a prerequisite for Chrome extension?

Why it is for Firefox?

When I was trying to upgrade Firefox extension to manifest v3, I was getting some errors related to @babel/preset-env package not supporting some api's for firefox target, don't remember the exact problem. In order to fix it, we need to update @babel/preset-env, but next supported version with a fix requires updated versions of babel-loader package, which works only on webpack v5 - https://webpack.js.org/loaders/babel-loader/#install.

There is a decent chance that this error was not related to our old webpack version, but upgrading it allows us to upgrade other babel packages now.

This is not the only blocker for migrating to manifest v3 on Firefox, the main one is that Firefox doesn't support ExecutionWorld.MAIN yet - https://discourse.mozilla.org/t/will-scripting-executionworld-main-be-supported/112919

Is it a prerequisite for Chrome extension?

No, Chrome extension already migrated to manifest v3.

hoxyq · 2023-06-12T17:26:46Z

There is a regression in parsing hooks names for React v17+, don't know why CI tests didn't catch that. Looking for ways to resolve it.

hoxyq · 2023-06-14T10:46:54Z

There is a regression in parsing hooks names for React v17+, don't know why CI tests didn't catch that. Looking for ways to resolve it.

Now fixed, there was a problem with CORS policy in testing shell, which we start with webpack dev server.

## Summary Overlooked when was working on #26887. - Added `webpack` packages as dev dependencies to `react-devtools-core`, because it calls webpack to build - Added `process` package as dev dependency, because it is injected with `ProvidePlugin` (otherwise fails with Safari usage) - Updated rule for sourcemaps - Listed required externals for `standalone` build Tested on RN application & Safari

List of changes: * Devtools:-Removed unused CSS ([Biki-das](https://github.com/Biki-das) in [#27032](#27032)) * fix[devtools/profilingCache-test]: specify correct version gate for test ([hoxyq](https://github.com/hoxyq) in [#27008](#27008)) * fix[devtools/ci]: fixed incorrect condition calculation for @reactVersion annotation ([hoxyq](https://github.com/hoxyq) in [#26997](#26997)) * fix[ci]: fixed jest configuration not to skip too many devtools tests ([hoxyq](https://github.com/hoxyq) in [#26955](#26955)) * fix[devtools/standalone]: update webpack configurations ([hoxyq](https://github.com/hoxyq) in [#26963](#26963)) * fix[devtools]: check if fiber is unmounted before trying to highlight ([hoxyq](https://github.com/hoxyq) in [#26983](#26983)) * feat[devtools]: support x_google_ignoreList source maps extension ([hoxyq](https://github.com/hoxyq) in [#26951](#26951)) * chore[devtools]: upgrade to webpack v5 ([hoxyq](https://github.com/hoxyq) in [#26887](#26887)) * fix[devtools]: display NaN as string in values ([hoxyq](https://github.com/hoxyq) in [#26947](#26947)) * fix: devtools cannot be closed correctly ([Jack-Works](https://github.com/Jack-Works) in [#25510](#25510)) * Fix:- Fixed dev tools inspect mode on Shadow dom ([Biki-das](https://github.com/Biki-das) in [#26888](#26888)) * Updated copyright text to Copyright (c) Meta Platforms, Inc. and its … ([denmo530](https://github.com/denmo530) in [#26830](#26830)) * Fix strict mode badge URL ([ibrahemid](https://github.com/ibrahemid) in [#26825](#26825))

## Summary - Remove unused webpack 4 dependencies ## How did you test this change? - Ran `yarn test --prod` - Ran `yarn test` ## Related PRs: - #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: facebook#22267 facebook#26506 ## How did you test this change? Tested on all surfaces, explicitly checked that parsing hook names feature still works.

## Summary Overlooked when was working on facebook#26887. - Added `webpack` packages as dev dependencies to `react-devtools-core`, because it calls webpack to build - Added `process` package as dev dependency, because it is injected with `ProvidePlugin` (otherwise fails with Safari usage) - Updated rule for sourcemaps - Listed required externals for `standalone` build Tested on RN application & Safari

List of changes: * Devtools:-Removed unused CSS ([Biki-das](https://github.com/Biki-das) in [facebook#27032](facebook#27032)) * fix[devtools/profilingCache-test]: specify correct version gate for test ([hoxyq](https://github.com/hoxyq) in [facebook#27008](facebook#27008)) * fix[devtools/ci]: fixed incorrect condition calculation for @reactVersion annotation ([hoxyq](https://github.com/hoxyq) in [facebook#26997](facebook#26997)) * fix[ci]: fixed jest configuration not to skip too many devtools tests ([hoxyq](https://github.com/hoxyq) in [facebook#26955](facebook#26955)) * fix[devtools/standalone]: update webpack configurations ([hoxyq](https://github.com/hoxyq) in [facebook#26963](facebook#26963)) * fix[devtools]: check if fiber is unmounted before trying to highlight ([hoxyq](https://github.com/hoxyq) in [facebook#26983](facebook#26983)) * feat[devtools]: support x_google_ignoreList source maps extension ([hoxyq](https://github.com/hoxyq) in [facebook#26951](facebook#26951)) * chore[devtools]: upgrade to webpack v5 ([hoxyq](https://github.com/hoxyq) in [facebook#26887](facebook#26887)) * fix[devtools]: display NaN as string in values ([hoxyq](https://github.com/hoxyq) in [facebook#26947](facebook#26947)) * fix: devtools cannot be closed correctly ([Jack-Works](https://github.com/Jack-Works) in [facebook#25510](facebook#25510)) * Fix:- Fixed dev tools inspect mode on Shadow dom ([Biki-das](https://github.com/Biki-das) in [facebook#26888](facebook#26888)) * Updated copyright text to Copyright (c) Meta Platforms, Inc. and its … ([denmo530](https://github.com/denmo530) in [facebook#26830](facebook#26830)) * Fix strict mode badge URL ([ibrahemid](https://github.com/ibrahemid) in [facebook#26825](facebook#26825))

## Summary - Remove unused webpack 4 dependencies ## How did you test this change? - Ran `yarn test --prod` - Ran `yarn test` ## Related PRs: - facebook#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: #22267 #26506 ## How did you test this change? Tested on all surfaces, explicitly checked that parsing hook names feature still works. DiffTrain build for commit 4ddc019.

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jun 1, 2023

hoxyq force-pushed the devtools/upgrade-to-webpack-5 branch 3 times, most recently from 77e20f1 to 432be0e Compare June 4, 2023 14:45

hoxyq commented Jun 5, 2023

View reviewed changes

hoxyq requested a review from tyao1 June 5, 2023 10:30

hoxyq force-pushed the devtools/upgrade-to-webpack-5 branch from 432be0e to bb6a18e Compare June 5, 2023 10:31

hoxyq commented Jun 5, 2023

View reviewed changes

hoxyq marked this pull request as ready for review June 5, 2023 10:49

tyao1 reviewed Jun 8, 2023

View reviewed changes

tyao1 approved these changes Jun 8, 2023

View reviewed changes

hoxyq force-pushed the devtools/upgrade-to-webpack-5 branch from bb6a18e to 850de7f Compare June 14, 2023 10:46

hoxyq force-pushed the devtools/upgrade-to-webpack-5 branch from 850de7f to 08095a2 Compare June 14, 2023 11:02

chore[devtools]: upgrade to webpack v5

8ade242

hoxyq force-pushed the devtools/upgrade-to-webpack-5 branch from 08095a2 to 8ade242 Compare June 14, 2023 11:07

hoxyq merged commit 4ddc019 into facebook:main Jun 14, 2023

hoxyq deleted the devtools/upgrade-to-webpack-5 branch June 14, 2023 12:15

hoxyq mentioned this pull request Jun 16, 2023

fix[devtools/standalone]: update webpack configurations #26963

Merged

styfle mentioned this pull request Jun 30, 2023

chore(deps): bump react 18.3.0-canary-1fdacbefd-20230630 vercel/next.js#52005

Merged

hoxyq mentioned this pull request Jul 4, 2023

React DevTools 4.27.8 -> 4.28.0 #27051

Merged

styfle mentioned this pull request Jul 5, 2023

chore(deps): bump react to 7118f5dd7 vercel/next.js#52282

Merged

anatoliik-lyft mentioned this pull request Jul 7, 2023

Uninstall unused Webpack 4 packages #27058

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore[devtools]: upgrade to webpack v5 #26887

chore[devtools]: upgrade to webpack v5 #26887

hoxyq commented Jun 1, 2023 •

edited

Loading

react-sizebot commented Jun 1, 2023 •

edited

Loading

hoxyq Jun 5, 2023

hoxyq Jun 5, 2023

tyao1 commented Jun 8, 2023

tyao1 Jun 8, 2023

hoxyq Jun 8, 2023

hoxyq commented Jun 8, 2023

hoxyq commented Jun 12, 2023

hoxyq commented Jun 14, 2023

chore[devtools]: upgrade to webpack v5 #26887

chore[devtools]: upgrade to webpack v5 #26887

Conversation

hoxyq commented Jun 1, 2023 • edited Loading

Summary

How did you test this change?

react-sizebot commented Jun 1, 2023 • edited Loading

Critical size changes

Significant size changes

hoxyq Jun 5, 2023

Choose a reason for hiding this comment

hoxyq Jun 5, 2023

Choose a reason for hiding this comment

tyao1 commented Jun 8, 2023

tyao1 Jun 8, 2023

Choose a reason for hiding this comment

hoxyq Jun 8, 2023

Choose a reason for hiding this comment

hoxyq commented Jun 8, 2023

hoxyq commented Jun 12, 2023

hoxyq commented Jun 14, 2023

hoxyq commented Jun 1, 2023 •

edited

Loading

react-sizebot commented Jun 1, 2023 •

edited

Loading