MB-7216: fail to upgrade webpack to v5

[carterjones]

Overview

I tried to upgrade webpack to v5, but encountered some errors that I couldn't figure out how to get past.

This PR contains the code that I was working on, prior to me backing away from this effort.

Error 1

(node:2300) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)

This appears to be related to html-webpack-plugin, but I can't figure out what I'm supposed to do to fix the error beyond upgrading to the latest version of both html-webpack-plugin and webpack. I did that and I still get the error.

Error 2

Module not found: Error: You attempted to import /opt/drupal/web/modules/custom/react_tools/tools/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2 which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

I don't have any idea what is causing this error, but I don't want to mess with paths without understanding how all the webpack configuration works. I'm not at all familiar with webpack, so I'm backing away from this.

Iterating locally

To reproduce the errors shown above, you can run these commands locally:

cd ./web/modules/custom/react_tools/tools
npm install
npm rebuild node-sass
CI=false npm run build

I found these commands in the config.yml file for CircleCI.

dependencies

The following dependency versions are incompatible with webpack v4, but are compatible with webpack v5:

• html-webpack-plugin@5.0.0 (jantimon/html-webpack-plugin@623918d#diff-7829468e86c1cc5d5133195b5cb48e1ff6c75e3e9203777f6b2e379d9e4882b3L11-R13)
• postcss-loader@5.0.0 (https://github.com/webpack-contrib/postcss-loader/releases/tag/v5.0.0)
• sass-loader@v11.0.0 (https://github.com/webpack-contrib/sass-loader/releases/tag/v11.0.0)
• terser-webpack-plugin@5.0.0 (https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v5.0.0)

useful commands

npm outdated can be used to identify out of date dependencies.

$ npm outdated
Package                Current  Wanted  Latest  Location                            Depended by
html-webpack-plugin      4.5.2   4.5.2   5.3.1  node_modules/html-webpack-plugin    tools
postcss-loader           4.2.0   4.2.0   5.2.0  node_modules/postcss-loader         tools
sass-loader             10.1.1  10.1.1  11.0.1  node_modules/sass-loader            tools
terser-webpack-plugin    4.2.3   4.2.3   5.1.1  node_modules/terser-webpack-plugin  tools
webpack                 4.46.0  4.46.0  5.27.2  node_modules/webpack                tools

when to upgrade to webpack v5

https://webpack.js.org/blog/2020-10-10-webpack-5-release/#so-when-is-the-time-to-upgrade

So when is the time to upgrade?
It depends. There is a good chance that upgrading fails and you would need to give it a second or 3rd try. If you are open to that, try to upgrade now and provide feedback to webpack, plugins and loaders. We are eager to fix those problems. Someone has to start and you would be one of the first ones benefiting from it.