Upgrade webpack v4 → v5 #1520

victorlin · 2022-06-03T21:51:38Z

Description of proposed changes

webpack 4 does not support Node.js v17 or above without the --openssl-legacy-provider option.

Related issue(s)

Support for Node.js 18 (#1553) relies on this webpack upgrade.

Pre-merge tasks

Merge auspice-client: Append extension on ESM imports nextstrain.org#634

Testing

Checks pass
auspice develop and hot-reloading works (comment)
nextstrain.org auspice-client works after pre-merge tasks (comment)
Manually click around Heroku preview app for this PR
Create downstream preview PRs
- [bot] [DO NOT MERGE] Test Auspice PR 1520 nextstrain.org#607
- [bot] [DO NOT MERGE] Test Auspice PR 1520 auspice.us#43
Manually click around downstream preview apps

Other notable discussion threads

Use a workaround for code-splitting (ref)
Use a workaround for auspice develop (ref)

webpack.config.js

jameshadfield

Thanks for this work Victor -- nice to keep these things updated periodically!

It looks like it's working with auspice build && auspice view but not auspice develop. Have you tried building nextstrain.org and/or auspice.us with it? The extension architecture was quite tricky to get integrated with webpack & I could imagine won't work out-of-the-box with webpack v5.

When it comes time to merge, we should make sure we spend a bit of time testing on nextstrain canary to see if there are any strange bugs, especially cache-related ones.

package.json

jameshadfield · 2022-09-27T21:49:53Z

👍 thanks Victor -- I'll re-review this before the end of the week

jameshadfield

Thanks for the efforts here Victor! Building auspice itself seems to work well - I couldn't detect any regressions using the app - but dev mode + extensions are still broken.

package.json

victorlin · 2022-10-04T17:57:49Z

Split the changes into 3 PRs:

Upgrade webpack v4 → v5 (this PR)
Update Actions versions #1559 (this should be good to merge)
Remove support for Node.js version 12, add 18 #1560 (this relies on the webpack upgrade)

webpack.config.js

babel.config.js

I went through all webpack-related packages and looked for the earliest version that supports both webpack 4 and webpack 5. If no version matched that, then I picked the latest version that supports webpack 4. - clean-webpack-plugin: https://github.com/johnagan/clean-webpack-plugin/blob/v4.0.0/package.json#L50 - compression-webpack-plugin: https://github.com/webpack-contrib/compression-webpack-plugin/blob/v3.1.0/package.json#L41 - html-webpack-plugin: https://github.com/jantimon/html-webpack-plugin/blob/v4.5.2/package.json#L49 - No version that supports both webpack 4 and 5. This is the latest version that supports webpack 4. - lodash-webpack-plugin: https://github.com/lodash/lodash-webpack-plugin/blob/0.11.6/package.json#L46 - webpack-bundle-analyzer: https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/v3.9.1/package.json#L89 - No version that supports both webpack 4 and 5. This is the latest version that supports webpack 4. Note that it is released as 3.9.0 on NPM. - webpack-dev-middleware: https://github.com/webpack/webpack-dev-middleware/blob/v3.7.3/package.json#L31 - webpack-hot-middleware: https://github.com/webpack-contrib/webpack-hot-middleware/blob/v2.25.2/package.json#L42 - No version that supports both webpack 4 and 5. This is the latest version that supports webpack 4. Command used: npm install --save \ clean-webpack-plugin@4.0.0 \ compression-webpack-plugin@3.1.0 \ html-webpack-plugin@4.5.2 \ lodash-webpack-plugin@0.11.6 \ webpack-bundle-analyzer@3.9.0 \ webpack-dev-middleware@3.7.3 \ webpack-hot-middleware@2.25.2

From the migration doc¹: > If you have rules defined for loading assets using raw-loader, > url-loader, or file-loader, please use Asset Modules instead as > they're going to be deprecated in near future. ¹ https://webpack.js.org/migrate/5/

webpack.config.js

jameshadfield

Thanks victor - this stuff is a huge amount of work and involves so many testing iterations!

It's working well for me for auspice on it's own, but see above re: auspice.us. The only aspect I didn't test explicitly was the cacheGroups chunk behavior (as they have longer cache max-ages, although I can't seem to find where we're setting this anymore 🤷 ); there's no obvious changes to these chunk groups here so it should be ok.

Context: in webpack v5, the files associated with the "core-vendors" custom group are classified as initial (entry-point) chunk files [1] when that was not the case in webpack v4. Not sure why. Add [name] to filename to be more consistent with chunkFilename, and so it's easier to understand the association between files and cacheGroups. Update the bundlesize config glob patterns to match these new names. Since the exact reason for filename vs. chunkFilename isn't clear to me, I updated all glob patterns to match either. Before: % ls -1 dist/*.js dist/auspice.bundle.9317bbd7a88738acbd84.js dist/auspice.bundle.a643293e8d8d26eb8631.js dist/auspice.chunk.106.bundle.db610e43983c64187457.js dist/auspice.chunk.145.bundle.4e68f1faa6878e1ced83.js dist/auspice.chunk.236.bundle.aafe143fec2bd894590f.js dist/auspice.chunk.383.bundle.79ae23992e50e870b00b.js dist/auspice.chunk.452.bundle.b75a285a5a08ef86511b.js dist/auspice.chunk.550.bundle.7a8bceea70ffde7edbf6.js dist/auspice.chunk.601.bundle.9a996464f910afbe8d17.js dist/auspice.chunk.718.bundle.8a109e6ba40b88251b95.js dist/auspice.chunk.815.bundle.2020e527c8ed3ebe83c5.js dist/auspice.chunk.971.bundle.a4099131fc6b718b0b0e.js dist/auspice.chunk.978.bundle.a3c6f896f16908bb753d.js dist/auspice.chunk.locales.bundle.49f1377f1c9b33ffa9c3.js dist/auspice.chunk.other-vendors.bundle.c38604b639c95e112558.js After: % ls -1 dist/*.js dist/auspice.chunk.106.bundle.db610e43983c64187457.js dist/auspice.chunk.145.bundle.4e68f1faa6878e1ced83.js dist/auspice.chunk.236.bundle.aafe143fec2bd894590f.js dist/auspice.chunk.383.bundle.79ae23992e50e870b00b.js dist/auspice.chunk.452.bundle.b75a285a5a08ef86511b.js dist/auspice.chunk.550.bundle.7a8bceea70ffde7edbf6.js dist/auspice.chunk.601.bundle.9a996464f910afbe8d17.js dist/auspice.chunk.718.bundle.8a109e6ba40b88251b95.js dist/auspice.chunk.815.bundle.2020e527c8ed3ebe83c5.js dist/auspice.chunk.971.bundle.a4099131fc6b718b0b0e.js dist/auspice.chunk.978.bundle.a3c6f896f16908bb753d.js dist/auspice.chunk.locales.bundle.49f1377f1c9b33ffa9c3.js dist/auspice.chunk.other-vendors.bundle.c38604b639c95e112558.js dist/auspice.core-vendors.bundle.209f45d95b5b37faa31c.js dist/auspice.main.bundle.9317bbd7a88738acbd84.js [1]: https://webpack.js.org/configuration/output/#outputchunkfilename

After upgrading webpack and plugins/loaders, there was an error from react-hot-loader: ReferenceError: module is not defined A known workaround is to enable safetyNet [1] so the code referencing `module` is not executed. I'm not sure why this was not shown before the webpack upgrades, but don't feel like digging deeper to find out. [1]: gaearon/react-hot-loader#1102 (comment)

NPM 7 comes with a new lockfile version which we will be using for a more consistent and up-to-date developer experience. NPM 8 is also supported since it uses the same lockfile version. The lockfile was upgraded from a fresh environment (node v16.17.1, npm 8.15.0) using `npm ci --ignore-scripts && npm install --ignore-scripts`.

Now that NPM 7 tries to install peer dependencies, having an old version of react-addons-css-transition-group alongside a newer version of React will not work with `npm install` as it used to. However, simply upgrading the old package does not work since there are no newer versions compatible with React 16. Instead, it has been deprecated in favor of react-transition-group¹. Luckily, version 1 of the new package provides a drop-in replacement. Commands used²: npm uninstall react-addons-css-transition-group --legacy-peer-deps npm install react-transition-group@1 --legacy-peer-deps ¹ https://www.npmjs.com/package/react-addons-css-transition-group ² --legacy-peer-deps is necessary with NPM 7 until other peer dependency issues are resolved by future commits.

Now that NPM 7 tries to install peer dependencies, having an old version of css-loader alongside a newer version of webpack will not work with `npm install` as it used to. This is the earliest version of css-loader that supports the installed webpack version. Command used¹: npm info css-loader@3 peerDependencies npm install --legacy-peer-deps \ css-loader@3.4.0 ¹ --legacy-peer-deps is necessary with NPM 7 until other peer dependency issues are resolved by future commits.

Now that NPM 7 tries to install peer dependencies, having an old version of eslint alongside a newer version of @babel/eslint-parser will not work with `npm install` as it used to. This is the earliest version of eslint that is supported by the installed eslint-parser version. Command used¹: npm info @babel/eslint-parser@7.16.3 peerDependencies npm install --legacy-peer-deps \ eslint@7.5.0 ¹ --legacy-peer-deps is necessary with NPM 7 until other peer dependency issues are resolved by future commits.

Now that NPM 7 tries to install peer dependencies, having an old version of these packages alongside a newer version of eslint will not work with `npm install` as it used to. These are the earliest versions that support the installed eslint version. Commands used¹: npm info eslint-config-airbnb@18 peerDependencies npm info eslint-plugin-jsx-a11y@6 peerDependencies npm info eslint-plugin-react-hooks@4 peerDependencies npm install \ eslint-config-airbnb@18.2.0 \ eslint-plugin-jsx-a11y@6.3.0 \ eslint-plugin-react-hooks@4.0.1

cli/view.js

jameshadfield

This is now working in auspice.us - thanks!

I'm going to merge without the regex fixup mentioned above preferring to move those to #1611

…kfile Upgrade to NPM 7/8, lockfile v2

victorlin self-assigned this Jun 3, 2022

nextstrain-bot temporarily deployed to auspice-victorlin-updat-atjzv8 June 3, 2022 21:51 Inactive

victorlin force-pushed the victorlin/update-versions branch from 8710447 to 2a30e49 Compare September 8, 2022 23:13

victorlin commented Sep 9, 2022

View reviewed changes

webpack.config.js Outdated Show resolved Hide resolved

victorlin changed the title ~~Update node, npm, Actions versions~~ Update node, npm, Actions, webpack Sep 9, 2022

victorlin marked this pull request as ready for review September 9, 2022 19:18

victorlin requested a review from a team September 9, 2022 19:19

jameshadfield mentioned this pull request Sep 21, 2022

Update supported node versions #1553

Closed

jameshadfield reviewed Sep 22, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

victorlin force-pushed the victorlin/update-versions branch from ae8ce43 to 9c1df8b Compare September 23, 2022 19:45

victorlin mentioned this pull request Sep 27, 2022

Use Node.js version 18 nextstrain/nextstrain.org#595

Closed

4 tasks

victorlin requested a review from a team September 27, 2022 18:20

jameshadfield requested changes Oct 3, 2022

View reviewed changes

package.json Show resolved Hide resolved

victorlin force-pushed the victorlin/update-versions branch from 9c1df8b to d44b47d Compare October 4, 2022 17:51

victorlin changed the title ~~Update node, npm, Actions, webpack~~ Update webpack v4 → v5 Oct 4, 2022

victorlin mentioned this pull request Oct 4, 2022

Remove support for Node.js version 12, add 18 #1560

Merged

4 tasks

victorlin changed the title ~~Update webpack v4 → v5~~ Upgrade webpack v4 → v5 Oct 4, 2022

victorlin force-pushed the victorlin/update-versions branch from d44b47d to 6b9fddf Compare October 4, 2022 22:29

victorlin commented Oct 4, 2022

View reviewed changes

webpack.config.js Outdated Show resolved Hide resolved

babel.config.js Show resolved Hide resolved

This was referenced Oct 4, 2022

CI: Build Auspice client nextstrain/nextstrain.org#599

Closed

Restore nextstrain.org PRs #1565

Merged

victorlin force-pushed the victorlin/update-versions branch from 6b9fddf to a8856bf Compare October 10, 2022 18:45

victorlin marked this pull request as draft October 10, 2022 18:46

nextstrain-bot mentioned this pull request Oct 10, 2022

[bot] [DO NOT MERGE] Test Auspice PR 1520 nextstrain/nextstrain.org#607

Closed

victorlin force-pushed the victorlin/update-versions branch from a8856bf to 4fa98cb Compare November 22, 2022 22:54

victorlin added 2 commits November 22, 2022 14:55

Upgrade webpack 4 to the latest available version

127e47f

victorlin force-pushed the victorlin/update-versions branch from 4fa98cb to e4fec8e Compare November 22, 2022 22:55

victorlin force-pushed the victorlin/update-versions branch from 5592aec to 33b5cbd Compare November 28, 2022 23:30

nextstrain-bot temporarily deployed to auspice-victorlin-updat-08zqoy November 28, 2022 23:38 Inactive

nextstrain-bot mentioned this pull request Nov 29, 2022

[bot] [DO NOT MERGE] Test Auspice PR 1520 nextstrain/auspice.us#43

Closed

jameshadfield reviewed Dec 1, 2022

View reviewed changes

webpack.config.js Show resolved Hide resolved

jameshadfield requested changes Dec 1, 2022

View reviewed changes

victorlin added 2 commits December 2, 2022 18:43

victorlin force-pushed the victorlin/update-versions branch from 33b5cbd to 1d2825d Compare December 3, 2022 02:43

nextstrain-bot deployed to auspice-victorlin-updat-08zqoy December 3, 2022 02:43 View deployment

victorlin added 7 commits December 2, 2022 19:11

Bump auspice version in lockfile

04e7c4e

This was referenced Dec 3, 2022

Update Webpack client variables #1607

Draft

Use default export to avoid Webpack 5 warning nextstrain/auspice.us#45

Merged

victorlin requested a review from jameshadfield December 3, 2022 05:16

This was referenced Dec 5, 2022

view: Error on missing build files #1608

Closed

External projects may incorrectly serve pre-built Auspice if custom build is not available #1613

Open

tsibley reviewed Dec 6, 2022

View reviewed changes

cli/view.js Show resolved Hide resolved

jameshadfield approved these changes Dec 7, 2022

View reviewed changes

jameshadfield mentioned this pull request Dec 7, 2022

CLI improvements #1611

Open

2 tasks

Merge pull request #1602 from nextstrain/victorlin/update-npm-and-loc…

783e467

…kfile Upgrade to NPM 7/8, lockfile v2

nextstrain-bot temporarily deployed to auspice-victorlin-updat-08zqoy December 7, 2022 00:04 Inactive

jameshadfield merged commit 1895c92 into master Dec 7, 2022

jameshadfield deleted the victorlin/update-versions branch December 7, 2022 00:06

victorlin mentioned this pull request Jun 14, 2023

Upgrade to Node.js 18 nextstrain/nextstrain.org#698

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade webpack v4 → v5 #1520

Upgrade webpack v4 → v5 #1520

victorlin commented Jun 3, 2022 •

edited

Loading

jameshadfield left a comment

jameshadfield commented Sep 27, 2022

jameshadfield left a comment

victorlin commented Oct 4, 2022 •

edited

Loading

jameshadfield left a comment

jameshadfield left a comment

Upgrade webpack v4 → v5 #1520

Upgrade webpack v4 → v5 #1520

Conversation

victorlin commented Jun 3, 2022 • edited Loading

Description of proposed changes

Related issue(s)

Pre-merge tasks

Testing

Other notable discussion threads

jameshadfield left a comment

Choose a reason for hiding this comment

jameshadfield commented Sep 27, 2022

jameshadfield left a comment

Choose a reason for hiding this comment

victorlin commented Oct 4, 2022 • edited Loading

jameshadfield left a comment

Choose a reason for hiding this comment

jameshadfield left a comment

Choose a reason for hiding this comment

victorlin commented Jun 3, 2022 •

edited

Loading

victorlin commented Oct 4, 2022 •

edited

Loading