Webpack5 update [DRAFT] #10656

raix · 2021-03-06T10:51:53Z

Webpack 5 update
Includes the work listed in #9994

Additional changes:

persistent cache
upgrade to dev server ´v4 (still beta)
terser is now included in webpack

Known issues:

currently the WebpackManifestPlugin is commented out due to "path undefined" error (feel free to investigate)
It feels like webpack emits compile twice - triggers a re print out on the screen (might be due to hook behavior change - or some of the code I removed in that area - maybe rewrite?)

Things I wanted to do but left out:

extract loaders/plugins etc. into separate files to make the main webpack config clean / easier to read
allowed domains - we should allow configuration and wildcard support imho
print out performance stats of the build - really hard to track / compare build speeds - eg. detecting regression
fix the test suite or comment out failing tests - eg. the pnp test is currently failing on master not sure if this pr. makes things better or worse

Credit include @andriijas, @sebinsua and @jasonwilliams (let me know if I missed out on any)

This reverts commit 3968923.

* upstream/master: Update IMAGE_INLINE_SIZE_LIMIT docs (#10631) Publish Update CHANGELOG Prepare 4.0.3 release update immer to 8.0.1 to address vulnerability (#10412) Upgrade eslint-webpack-plugin to fix opt-out flag (#10590) Bump webpack-dev-server 3.11.0 -> 3.11.1 (#10312) tests: update test case to match the description (#10384) Publish Prepare 4.0.2 release Add opt-out for eslint-webpack-plugin (#10170) Add support for new BUILD_PATH advanced configuration variable (#8986) appTsConfig immutability handling by immer (#10027) Fix CI tests (#10217) docs: add missing override options for Jest config (#9473)

This reverts commit 580ed5d.

References: * [hook rename](TypeStrong/fork-ts-checker-webpack-plugin#490) * [include/exclude](TypeStrong/fork-ts-checker-webpack-plugin#450) and [issue options](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#issues-options) * [release notes 5.0.0](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/releases/tag/v5.0.0)

Add [email protected] Remove optimize-css-assets-webpack-plugin and postcss-safe-parser References: * https://webpack.js.org/plugins/css-minimizer-webpack-plugin/

Reference: * https://webpack.js.org/plugins/ignore-plugin/#example-of-ignoring-moment-locales * #10006

…d path

supporting incremental typescript builds

rickihastings · 2021-03-11T19:39:37Z

Hey, I noticed file-loader and url-loader are still used in this PR, however they are deprecated in Webpack 5 and can be replaced with asset modules.

raix · 2021-03-11T19:55:22Z

Yep good catch! I'll see if I'll update in the weekend :)

vjpr · 2021-03-16T14:46:54Z

Could you publish updates to npm - would make testing easier...

I.e. Swap react-scripts to @raix/react-scripts

kumarlachhani · 2021-03-17T19:19:40Z

currently the WebpackManifestPlugin is commented out due to "path undefined" error (feel free to investigate)

This error is raised from webpack-manifest-plugin. Webpack 5 is not supported yet but maintainers are planning to add support. So you can change several lines in default.config.js output section from:

output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// blah blah blah
}
to:

output: {
// The build folder.
path: paths.appBuild,
// blah blah blah
}

Source: https://stackoverflow.com/questions/64019154/migrating-cra-to-webpack-5

@kumarlachhani

review feedback from @kumarlachhani

raix · 2021-03-20T15:36:29Z

@rickihastings now using asset modules
@kumarlachhani thanks, the config is simplified
@vjpr nope not going to take on the task of releasing npm packages, I don't have the time for it - I did talk with @andriijas about creating a WP5 feature branch - maybe do prereleases from that branch (eg. a cra v5 branch as removing nodejs builtin shims could be a breaking change although necessary)

Note: I did change alot of things, but have not tested extensively - a prerelease would enable the community to help out testing to harden this thing.

Thank you for the feedback! :)

raix · 2021-03-20T15:55:52Z

packages/cra-template-typescript/template/gitignore

@@ -5,6 +5,9 @@
 /.pnp
 .pnp.js

+# build cache info
+tsconfig.tsbuildinfo
+


We should set compilerOptions tsBuildInfoFile: paths.cacheTsBuildInfoFile in the ForkTsCheckerWebpackPlugin

Chastrlove · 2021-03-22T09:24:42Z

@raix

I try to change the code in App.js
import {ReactComponent as Logo} from './logo.svg';

Then the error shows:
Can't import the named export 'ReactComponent' (imported as 'Logo') from default-exporting module (only default export is available)

lukaskoeller · 2021-03-29T14:26:10Z

Is there anything I can support with? I do like the initiative on updating webpack to v5 and would like to support if possible/needed

raix · 2021-03-29T15:53:13Z

@lukaskoeller Currently svgr react component imports seems broken + when starting in watch mode it seems a bit clucky/extra refresh + general QA/test pnp etc. I'll try to get a feature branch up this week making it easier to test/contribute

popuguytheparrot · 2021-04-30T07:23:40Z

How can i help with this PR?

bluenote10 · 2021-05-05T20:34:52Z

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -137,28 +134,16 @@ function createCompiler({

  let isFirstCompile = true;
  let tsMessagesPromise;


tsMessagesPromise doesn't get resolved anywhere, does it?

Bluefitdev · 2021-05-06T07:03:34Z

I want to help too if you have too if you need any :). Hopefully this is released soon

This reverts commit 952f896.

* upstream/wp5: Remove outdated comments on react-refresh (#10784) Suggest sass instead of node-sass package (#10779) Upgrade docs http links to https (#10288) Fix ICSS syntax in stylesheets (#10511) Update PWA docs to point at the cra-template-pwa package (#10805) Trivial English fixes (#10763) Bump y18n from 4.0.0 to 4.0.1 in /docusaurus/website (#10765) Update ModuleNotFoundPlugin to support Webpack 5 (#10205) Update WebpackManifestPlugin (#10204) Update PostCSS packages (#10456) [email protected] Security Fix for Command Injection - huntr.dev (#10644)

raix · 2021-05-14T17:06:00Z

Closing this pull-request in favor of #10961 targeted the wp5 branch

Morten N.O. Henriksen and others added 20 commits January 27, 2021 19:36

Revert "Revert "Update postcss packages" (#10216)"

cdb7ec0

This reverts commit 3968923.

Revert "Update postcss packages" (#10216)

79b16d4

This reverts commit 580ed5d.

Update postcss and loader

8d5d16f

Update fork-ts-checker-webpack-plugin 6.0.5

6777da0

Add [email protected] remove

f959414

Add [email protected] Remove optimize-css-assets-webpack-plugin and postcss-safe-parser References: * https://webpack.js.org/plugins/css-minimizer-webpack-plugin/

Add support for Webpack 5 message objects

fb56a14

Update WebpackManifestPlugin to v3.0.0

48c5456

Support both "SingleEntryPlugin" and "EntryPlugin"

468ffe6

Support Webpack 5 IgnorePlugin signature

4d0be4a

Reference: * https://webpack.js.org/plugins/ignore-plugin/#example-of-ignoring-moment-locales * #10006

Update webpack and dev server

cfee807

Enable persistent cache

38d72e7

Fix react-error-overlay webpack

5bef914

Fix dev server config

58d36c2

Remove support for SingleEntryPlugin

a89a63a

update workbox-webpack-plugin

74ed0c7

Fix post css config

19faf8c

Comment out WebpackManifestPlugin for now having issues with undefine…

bbf93d2

…d path

Add fast refresh entries to ModuleScopePlugin

73c952b

raix requested review from ianschmitz, iansu, mrmckeb and petetnt as code owners March 6, 2021 10:51

facebook-github-bot added the CLA Signed label Mar 6, 2021

raix changed the title ~~Webpack5 update~~ Webpack5 update [DRAFT] Mar 6, 2021

raix mentioned this pull request Mar 6, 2021

Webpack 5 support overview #9994

Closed

25 tasks

Morten N.O. Henriksen added 3 commits March 6, 2021 21:29

Format files

33f9064

Remove unused variables in start command

5e79ffa

git ignore tsconfig.tsbuildinfo

c0e4c4d

supporting incremental typescript builds

Morten N.O. Henriksen added 3 commits March 20, 2021 15:55

simplify output path

871b2e9

review feedback from @kumarlachhani

Use asset modules in react-scripts

613e2a5

Use asset modules in react-error-overlay

952f896

raix commented Mar 20, 2021

View reviewed changes

bluenote10 reviewed May 5, 2021

View reviewed changes

Morten N.O. Henriksen added 3 commits May 14, 2021 18:13

Revert "Use asset modules in react-error-overlay"

2217ab7

This reverts commit 952f896.

Disable broken tests for now

6eef86c

raix mentioned this pull request May 14, 2021

[WP5] Webpack5 update #10961

Merged

raix closed this May 14, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack5 update [DRAFT] #10656

Webpack5 update [DRAFT] #10656

raix commented Mar 6, 2021 •

edited

Loading

rickihastings commented Mar 11, 2021

raix commented Mar 11, 2021

vjpr commented Mar 16, 2021

kumarlachhani commented Mar 17, 2021 •

edited

Loading

raix commented Mar 20, 2021 •

edited

Loading

raix Mar 20, 2021

Chastrlove commented Mar 22, 2021

lukaskoeller commented Mar 29, 2021

raix commented Mar 29, 2021

popuguytheparrot commented Apr 30, 2021

bluenote10 May 5, 2021

Bluefitdev commented May 6, 2021

raix commented May 14, 2021

		@@ -137,28 +134,16 @@ function createCompiler({

		let isFirstCompile = true;
		let tsMessagesPromise;

Webpack5 update [DRAFT] #10656

Webpack5 update [DRAFT] #10656

Conversation

raix commented Mar 6, 2021 • edited Loading

rickihastings commented Mar 11, 2021

raix commented Mar 11, 2021

vjpr commented Mar 16, 2021

kumarlachhani commented Mar 17, 2021 • edited Loading

raix commented Mar 20, 2021 • edited Loading

raix Mar 20, 2021

Choose a reason for hiding this comment

Chastrlove commented Mar 22, 2021

lukaskoeller commented Mar 29, 2021

raix commented Mar 29, 2021

popuguytheparrot commented Apr 30, 2021

bluenote10 May 5, 2021

Choose a reason for hiding this comment

Bluefitdev commented May 6, 2021

raix commented May 14, 2021

raix commented Mar 6, 2021 •

edited

Loading

kumarlachhani commented Mar 17, 2021 •

edited

Loading

raix commented Mar 20, 2021 •

edited

Loading