Update js dependencies, prepare for webpack 5 #4146

skovmand · 2021-01-10T10:16:57Z

This PR updates all javascript dependencies to their newest versions, but also removes and changes some of them to prepare for upgrading to webpack 5.

Dependency changes:

All js dependencies are updated to latest version that still support webpack 4
Version numbers in package.json are updated to reflect the latest current version, with ^ for minor version upgrades
~~The webpack version is now also prefixed with ^ for minor version updates. It was locked to a single version before~~ (update: this was done in Allow webpack > 4.41 but < 5 #4198 in the meantime)
HardSourceWebpackPlugin was not compatible with the latest mini-css-extract-plugin. Also it should not be necessary in webpack 5, so it is removed in 2ada2fe
The node-sass plugin has been deprecated and the sass-loader recommends using dart-sass instead. I have replaced node-sass with sass in bc43102

Other changes:

Several webpack plugins now require Node.js 10.13. I have updated the minimum Node.js version in installation.md
~~Node.js is spelled differently across Phoenix as e.g. "node", "NodeJS", "Node.JS", etc, but the correct spelling is Node.js. This is corrected across the project~~ (Update: This has been done in Use consistent naming of Node.js in docs #4150)

I have created a new phx_new package locally and verified that I can install a new phoenix project with these updated packages, and that the iex -S mix phx.server runs.

I haven't verified that it works with releases yet.

Notes on warnings:

Currently we get a lot of warnings during npm install:

npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

As I understand it, these errors will be fixed in webpack 5, and we can't do anything about them before upgrading to webpack 5. chokidar@2.1.8, resolve-url@0.2.1, urix@0.1.0, fsevents@1.2.13 are all dependencies of webpack@4.45.0.

The path ahead

This PR paves the way for upgrading to webpack 5, by removing some plugins and updating others to versions compatible with webpack 5. Also, updating to webpack 5 should fix the above deprecations.

Should we wait until Phoenix 1.6 with an upgrade to webpack 5, or would it be ok to include it in Phoenix 1.5?

skovmand · 2021-01-10T10:26:24Z

Okay, I just discovered that there is already a PR for updating to webpack 5 here with a lot of discussion. I didn't see that before making this. Let me know if I should close this PR again, that is 👍

However this PR is different in remaining on webpack 4 to prepare for webpack 5 and to hopefully make the webpack 5 upgrade step smaller. So perhaps this could be useful if the webpack 5 upgrade will not happen for a while.

skovmand · 2021-01-10T10:39:11Z

Also, I think we also need to update the topbar dependency for LiveViews

henrik · 2021-01-12T16:52:53Z

(Not a maintainer, just another contributor.) The "Node.js" naming consistency fixes seems like a fairly separate fix that could perhaps be merged independent of that other PR (and this one) – could it make sense to make that into a separate PR?

skovmand · 2021-01-13T07:43:02Z

Good suggestion! Done in #4150
I have removed the Node.js renaming from this PR by force-pushing just now

installer/templates/phx_assets/webpack.config.js

- Major version 6 is the last one to support webpack 4 - Minimum supported Node.js version is 10.13 - Changelog: https://github.com/webpack-contrib/copy-webpack-plugin/blob/v6.4.1/CHANGELOG.md

- Changelog: https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md

- Minimum Node.js version is v10.13 - Changelog: https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md

The node-sass module is deprecated and sass-loader recommends using dart-sass instead, https://github.com/webpack-contrib/sass-loader

- It makes asset compilation crash when used with latest mini-css-extract-plugin - HardSourceWebpackPlugin is no longer needed with Webpack 5: mzgoddard/hard-source-webpack-plugin#514 (comment)

- Changelog: https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/CHANGELOG.md

- Changelog: https://github.com/webpack-contrib/terser-webpack-plugin/blob/master/CHANGELOG.md

skovmand · 2021-02-17T08:20:55Z

I just force-pushed on top of the current v1.5 branch to:

fix merge conflicts
update all js deps to latest minor versions compatible with webpack 4
change double-quotes to single quotes in webpack.config.js
also update topbar from 0.1.4 to 1.0.1

skovmand · 2021-02-17T08:30:14Z

This is strange: My diff on GitHub is confusing for this commit: 08dd8b4 .. It shows changes to

<%= if html do %>

and

<% end %><%= if live do %>

But my local git commit shows no changes. 🤔

skovmand · 2021-02-17T08:55:51Z

If you choose to go with #4054, just let me know, I will close this PR.

Also if I should move change from node-sass to sass into another PR, also let me know 🙂 (update: I just saw that sass is currently used on the master branch).

skovmand · 2021-03-22T19:59:15Z

Is there interest in going forward with this PR? If so, please let me know, and I'll bump the dependencies to their newest versions.

I'll close the PR in a week if there's no activity on it.

chrismccord · 2021-03-22T20:00:30Z

I have a large backlog of other items. Hang tight. Thanks! :)

skovmand · 2021-03-22T20:09:03Z

@chrismccord Thanks, and thank you for your work! Please let me know if there are things that will make review and merge of the PR easier at your end. I'm happy to help ☀️

chrismccord · 2021-06-22T20:53:48Z

We have tacked webpack v5 support in #4337 . Thank you for the leg work on this! ❤️❤️❤️🐥🔥

cw789 mentioned this pull request Jan 31, 2021

Update to webpack v5 #4054

Closed

hugo reviewed Feb 2, 2021

View reviewed changes

installer/templates/phx_assets/webpack.config.js Outdated Show resolved Hide resolved

skovmand added 15 commits February 17, 2021 08:57

Update copy-webpack-plugin 5.1.1 -> 6.4.1

ec3f936

- Major version 6 is the last one to support webpack 4 - Minimum supported Node.js version is 10.13 - Changelog: https://github.com/webpack-contrib/copy-webpack-plugin/blob/v6.4.1/CHANGELOG.md

Update css-loader 3.4.2 -> 5.0.1

8114771

- Changelog: https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md

Update sass-loader 8.0.2 -> 10.1.0

3f4b9c0

- Minimum Node.js version is v10.13 - Changelog: https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md

Replace node-sass with dart-sass 1.32.2

bc43102

The node-sass module is deprecated and sass-loader recommends using dart-sass instead, https://github.com/webpack-contrib/sass-loader

Remove HardSourceWebpackPlugin to prepare for Webpack 5 upgrade

2ada2fe

- It makes asset compilation crash when used with latest mini-css-extract-plugin - HardSourceWebpackPlugin is no longer needed with Webpack 5: mzgoddard/hard-source-webpack-plugin#514 (comment)

Update mini-css-extract-plugin 0.9.0 -> 1.3.3

b6a582e

- Changelog: https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/CHANGELOG.md

Update optimize-css-assets-webpack-plugin 5.0.1 -> 5.0.4

bdf9f03

Update terser-webpack-plugin 2.3.2 -> 4.2.3

670e498

- Changelog: https://github.com/webpack-contrib/terser-webpack-plugin/blob/master/CHANGELOG.md

Update webpack 4.41.5 -> 4.45.0, add minor version updates

9ab5f6c

Update webpack-cli 3.3.2 -> 3.3.12

a18c00e

Write babel dependencies as current versions in package.json

e2903ef

Change minimum required Node.js version to 10.13 in docs

1b3a890

Fix double-quotes in webpack.config.js

7dfc362

Update to latest minor versions for 2021-02-17

457d634

Update topbar 0.1.4 -> 1.0.1

08dd8b4

skovmand closed this Mar 22, 2021

skovmand reopened this Mar 22, 2021

chrismccord closed this Jun 22, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update js dependencies, prepare for webpack 5 #4146

Update js dependencies, prepare for webpack 5 #4146

skovmand commented Jan 10, 2021 •

edited

skovmand commented Jan 10, 2021 •

edited

skovmand commented Jan 10, 2021

henrik commented Jan 12, 2021

skovmand commented Jan 13, 2021 •

edited

skovmand commented Feb 17, 2021

skovmand commented Feb 17, 2021 •

edited

skovmand commented Feb 17, 2021 •

edited

skovmand commented Mar 22, 2021

chrismccord commented Mar 22, 2021

skovmand commented Mar 22, 2021

chrismccord commented Jun 22, 2021

Update js dependencies, prepare for webpack 5 #4146

Update js dependencies, prepare for webpack 5 #4146

Conversation

skovmand commented Jan 10, 2021 • edited

Dependency changes:

Other changes:

Notes on warnings:

The path ahead

skovmand commented Jan 10, 2021 • edited

skovmand commented Jan 10, 2021

henrik commented Jan 12, 2021

skovmand commented Jan 13, 2021 • edited

skovmand commented Feb 17, 2021

skovmand commented Feb 17, 2021 • edited

skovmand commented Feb 17, 2021 • edited

skovmand commented Mar 22, 2021

chrismccord commented Mar 22, 2021

skovmand commented Mar 22, 2021

chrismccord commented Jun 22, 2021

skovmand commented Jan 10, 2021 •

edited

skovmand commented Jan 10, 2021 •

edited

skovmand commented Jan 13, 2021 •

edited

skovmand commented Feb 17, 2021 •

edited

skovmand commented Feb 17, 2021 •

edited