Webpack 5 support overview

[raix]

Overview of tasks needed for updating CRA to Webpack 5 - Some of the work will support both Webpack 4 + 5 but some plugins only support Webpack 5 + the webpack config itself has breaking changes.

Prerequisites

• Move ESLint cache file into node_modules #9977 Move .eslintcache into .cache (part of fixing test suite)
• Fix CI tests #10217 Fix CRA test suite to validate the pull-requests for Webpack 5 changes

Loaders / plugins [multiple pull-requests]

• Replace deprecated eslint-loader by eslint-webpack-plugin #9751 Use the ESLintPlugin instead of eslint-loader
• Switch to the Workbox InjectManifest plugin #9205 Update GenerateSW changed signature (Fixed in PR Switch to the Workbox InjectManifest plugin #9205 using InjectManifest instead?)
• Fix refreshOverlayInterop module scope error #9805 Fix ModuleScopePlugin.js (might have been fixed?)
• Update PnpWebpackPlugin (supported as default in WP5 - is this plugin still required? - also seems like tests PnP are broken)
• Move node polyfills in webpack to prepare for webpack 5 #7914react-error-overlay Move node polyfills in webpack to prepare for webpack 5 closed for now
• remove chalk from formatWebpackMessages #10198 formatWebpackMessages.js remove usage of chalk in client code
• Update PostCSS packages #10456 Update postcss-loader postcss8
• Update WebpackManifestPlugin #10204 The ManifestPlugin plugin is slowly getting up to speed / maintained again (use 3.0.x check for updates)
• Update ModuleNotFoundPlugin to support Webpack 5 #10205 Update ModuleNotFoundPlugin.js adding support for SingleEntryPlugin -> EntryPlugin

Webpack 5 specific [single pull-request #10961 to wp5 branch]

• WP5 - Update IgnorePlugin signature #10006 Update IgnorePlugin changed signature
• Use terser-webpack-plugin from webpack 5 (no apparent changes needed, remove usage of cache/cacheKeys/sourceMap Read changelog)
• Update html-webpack-plugin to 5.0.0
• Webpack 5 dropped nodejs builtin package shims - not sure if we need to still support this. (packages like axios still need this afaik, maybe just drop support?, POC)
• The webpack config it self has minor changes, a filename to be updated etc. Read about more findings here and Branch
• WP5 - Update fork-ts-checker-webpack-plugin [DRAFT] #10004 ForkTsCheckerWebpackPlugin
• WP5 - Replace OptimizeCssAssetsWebpackPlugin with CssMinimizerWebpackPlugin #10005 use css-minimizer-webpack-plugin instead of OptimizeCSSAssetsPlugin
• Add support for Webpack 5 message objects #10121 or fix: Patched 'formatWebpackMessage' for webpack 5 #10098 or Fix #9880 #9943 ? Update / support both WP4 and WP5 message format in formatWebpackMessages.js (message is an object in WP5)
• Update react-dev-utils see description and solution in this comment

Remaining work on the wp5 branch

• Investigate if transpilation of node modules is still working (Webpack 5 support overview #9994 (comment) could indicate an issue)
• Wp5 update webpack dependencies and fix minor issues #11170
• Compilation hook causes the CLI screen to rerender causing bad DX (fixed in Wp5 update webpack dependencies and fix minor issues #11170)
• Webpack 5 dependency resolution, some packages seem to depend on v4 breaking npm resolution (need to investigate, ref: Webpack 5 support overview #9994 (comment) - could not reproduce on latest version of webpack 5)

Webpack 5 maybe later?

• webpack-dev-server is currently in v4.0.0-beta.3 for webpack 5 support (v3.x also seem to work?)

Regarding federated modules:
* [ ] The Webpack dev server doesn't yet support federated modules so we'll likely have to wait a bit on that.
Out of scope - read more in #9510

References:

• Webpack 5 Draft pull-request
• Experimental branch
• More findings

Notes:

• We are currently trying to not include node js builtin shims, it's potentially a breaking change if using packages meant for backend usage or mixed frontend/backend packages. (it happens that newcommers to Npm include backend packages in their frontend code, would be great to prevent this)
• PnP is supported as default in Webpack 5 and fork-ts-checker-webpack-plugin as I read it - but it would be great to QA / fix the tests

[jasonwilliams]

pnp plugin won't be needed once you upgrade to Webpack 5, so maybe you can remove it as part of the single PR
https://webpack.js.org/migrate/5/#clean-up-configuration

What pnp tests are broken?

[raix]

@jasonwilliams cool, I'll strike out the PnP task - regarding tests it's the yarn docker:e2e --test-suite I think it was e2e-installs (one of them ends with a PnP test that breaks when testing locally, but more tests are actually breaking atm. I have a stash for fixing the simple test when I need it)

[jasonwilliams]

@raix do you need help on anything? Looks like its just PRs waiting to be reviewed

[raix]

@jasonwilliams I think if the simple e2e test passes it should be good to complete (unfortunately for the tests to run there is missing support for the new JSX babel transformation when testing + .eslintcache needs to be git ignored in each of the templates)

[raix]

@jasonwilliams I need to QA 3 of the pr's and address review comments in 10005 / I'll likely only get to those comments in the weekend, if you have time feel free to jump in to QA/resolve comments or make pr's the other updates.

[jasonwilliams]

@raix theres some I looked at, how are you testing? Are you linking the repo then launching with npx? I know nothing about tap so couldn’t do much on the forkTsChecker one

[jasonwilliams]

@iansu can we pin this issue?

[jasonwilliams]

@raix #10121 for the formatting

[jasonwilliams]

chalk is only being used for 1 function here https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/formatWebpackMessages.js#L83

The problem is its being bundled into client side builds. Is it worth keeping for that 1 function?
If we choose to keep it, whoever uses formatWebpackMessages will need to prune it from client side builds going forward.

@iansu can we remove it? It causes more problems than it solves (its only used for coloring the text on the terminal)

[jasonwilliams]

Also on the front end process won't be defined here:
https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/webpackHotDevClient.js

[shellscape]

An update for you all here: shellscape/webpack-manifest-plugin#222 (comment)

FWIW the 3.0 RC has basically been tossed out the window and I'm reapplying fixes in there atop the refactored codebase.

[raix]

@jasonwilliams not sure about the process - the global should be defined from .env + environment variables already (I didn't experience any issue there - the only thing is about chalk not being browser compliant)

[jasonwilliams]

it’s not defined in the browser, removing chalk may fix it

[raix]

@arogozine I think it's a good idea because it's actually reading the tsconfig etc. Babel would likely still be needed but limited to env & react presets + fast refresh - more importantly the jest configuration should be updated to use ts and do actual typechecking on test files. Lets create a separate issue for this "[v5] Use ts loader and ts in jest"?

EDIT: Added #11247 for tracking of better typescript support

[xyy94813]

How complicated is it to migrate from CRA v4 to the version that includes webpack v5?

I have a new project coming up in the next few days and would like to implement it based on webpack v5.
Since, the beta version has not been released yet.
I am considering whether to create the project based on CRA V4 first and then migrate it later.

[popuguytheparrot]

@xyy94813 try nextjs in spa mode

[raix]

@xyy94813 we aim to not have breaking changes, that said webpack 5 no longer shim nodejs builtin packages - if you depend on backend or certain polymorphic packages it might be a problem (likely in most builds depending on wp5 or rollup)

[arobert93]

@raix Any news on the alpha release?

[raix]

@arobert93 Im waiting for some feedback in the maintainer group, hope to get it cleared out later today on the last parts. (Issue with the hmr and error overlay afaik, and module federation pr)
Really hope for an alpha ultimo this week 🤞

[phochard]

@raix did you get the feedback you were waiting for last week ?

[raix]

Yes, it's down to @iansu or @mrmckeb to cut the alpha release - I've defered some feedback into v5 issues for further discussions in order for us to push the alpha out asap.

[phochard]

Hello,
When is the next release including this fix planned please ?
I'm really looking forward to use WP5 in my project using CRACO 🙏🏼
Thanks.

[fengerzh]

@phochard When all these issues closed. https://github.com/facebook/create-react-app/milestone/81

[FezVrasta]

Can the community help somehow? It seems like most of the PRs listed in the milestone are ready to be merged.

[agusterodin]

Hey, I hate to beat a dead horse but does someone have plans to get a beta release out any time soon? I would be infinitely grateful for a yes or no.

A no is perfectly acceptable, it would just be nice to know. Nobody owes us anything and we all owe a lot of appreciation to the hard work the maintainers have put in since CRA started.

That being said, it is very hard to plan a technical direction for a project without knowing the fate of one of your key dependencies. Transitioning to Next is a really safe bet at this point in time, especially given the comments Dan Abramov recently made about the state of CRA but transitioning is a very heavy lift for many apps.

[MrEfrem]

@agusterodin what comments did Dan Abramov leave about state of CRA? I’m just curious because I don’t like performance Webpack 4 too. And I’d like to know about future CRA.

[dons20]

@agusterodin I've been following this discussion, not sure if this helps, but it seems like some activity is going on. #11278

[MrEfrem]

@agusterodin I've been following this discussion, not sure if this helps, but it seems like some activity is going on. #11278

Yes, there’s life. It’s very good.

[agusterodin]

@agusterodin what comments did Dan Abramov leave about state of CRA? I’m just curious because I don’t like performance Webpack 4 too. And I’d like to know about future CRA.

#11180 (comment)