Repository navigation
Webpack 5 support overview #9994
Description
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
.eslintcacheinto.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
ESLintPlugininstead ofeslint-loader - Switch to the Workbox InjectManifest plugin #9205 Update
GenerateSWchanged 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?) -
UpdatePnpWebpackPlugin(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-overlayMove node polyfills in webpack to prepare for webpack 5 closed for now - remove chalk from formatWebpackMessages #10198
formatWebpackMessages.jsremove usage ofchalkin client code - Update PostCSS packages #10456 Update
postcss-loaderpostcss8 - Update WebpackManifestPlugin #10204 The
ManifestPluginplugin is slowly getting up to speed / maintained again (use 3.0.xcheck for updates) - Update ModuleNotFoundPlugin to support Webpack 5 #10205 Update
ModuleNotFoundPlugin.jsadding support forSingleEntryPlugin->EntryPlugin
Webpack 5 specific [single pull-request #10961 to wp5 branch]
- WP5 - Update IgnorePlugin signature #10006 Update
IgnorePluginchanged signature - Use
terser-webpack-pluginfrom webpack 5 (no apparent changes needed, remove usage ofcache/cacheKeys/sourceMapRead changelog) - Update
html-webpack-pluginto5.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-plugininstead ofOptimizeCSSAssetsPlugin - 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(messageis an object in WP5) - Update
react-dev-utilssee 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-serveris currently inv4.0.0-beta.3for 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:
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-pluginas I read it - but it would be great to QA / fix the tests
Activity
jasonwilliams commentedon Nov 4, 2020
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 commentedon Nov 5, 2020
@jasonwilliams cool, I'll strike out the PnP task - regarding tests it's the
yarn docker:e2e --test-suiteI 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 commentedon Nov 5, 2020
@raix do you need help on anything? Looks like its just PRs waiting to be reviewed
raix commentedon Nov 5, 2020
@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 commentedon Nov 9, 2020
@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 commentedon Nov 14, 2020
@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 commentedon Nov 17, 2020
@iansu can we pin this issue?
jasonwilliams commentedon Nov 20, 2020
@raix #10121 for the formatting
jasonwilliams commentedon Nov 26, 2020
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 commentedon Nov 26, 2020
Also on the front end
processwon't be defined here:https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/webpackHotDevClient.js
shellscape commentedon Dec 2, 2020
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 commentedon Dec 4, 2020
@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 commentedon Dec 4, 2020
it’s not defined in the browser, removing chalk may fix it
89 remaining items
raix commentedon Jul 27, 2021
@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)
acomanescu commentedon Jul 28, 2021
@raix Any news on the alpha release?
raix commentedon Jul 28, 2021
@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 🤞
p0wline commentedon Aug 3, 2021
@raix did you get the feedback you were waiting for last week ?
raix commentedon Aug 3, 2021
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.
p0wline commentedon Aug 26, 2021
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 commentedon Aug 26, 2021
@phochard When all these issues closed. https://github.com/facebook/create-react-app/milestone/81
FezVrasta commentedon Sep 16, 2021
Can the community help somehow? It seems like most of the PRs listed in the milestone are ready to be merged.
agusterodin commentedon Sep 19, 2021
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 commentedon Oct 21, 2021
@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 commentedon Oct 21, 2021
@agusterodin I've been following this discussion, not sure if this helps, but it seems like some activity is going on. #11278
MrEfrem commentedon Oct 22, 2021
Yes, there’s life. It’s very good.
agusterodin commentedon Oct 22, 2021
#11180 (comment)