[email protected] dependency is not compatible with Webpack@5 out of the box

[birdofpreyru]

• Operating System: Ubuntu
• Node Version: 12.19.0
• NPM Version: 6.14.8
• webpack Version: 5.1.2
• mini-css-extract-plugin Version: 1.0.0

Actual Behavior

I am in the progress of upgrading my React toolset to Webpack@5. Running a compilation of some codebase I got the following error message

ModuleNotFoundError: Module not found: Error: Can't resolve 'url' in '/home/birdofprey/Documents/dr.pogodin.studio/react-utils/node_modules/normalize-url'
          
          BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
          This is no longer the case. Verify if you need this module and configure a polyfill for it.
          
          If you want to include a polyfill, you need to:
          	- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
          	- install 'url'
          If you don't want to include a polyfill, you can use an empty module like this:
          	resolve.fallback: { "url": false }

I did not have a chance to dig deeper into it yet, and probably update the ticket with more info in the following days, but after a very brief look I found the following:

1. Only two packages within dependencies depend on normalize-url: this one (on v1.9.1), and optimize-css-assets-webpack-plugin (on 3.3.0).
2. A note in normalize-url page mentions if you need to use this in browser, use version 4+, thus I guess the latest normalize-url should work with Webpack@5 out of the box, with no need of fallbacks.
3. I noticed this PR in past, which downgrated normalize-url: fix: downgrading normalize-url #399

Taking all these into account, I decided to already create this ticket, to check if somebody arounds knows more about it: is it still needed to keep old normalize-url around? Is it possible to upgrade to its latest version, or drop/replace that dependency by something else?

[alexander-akait]

Do not use optimize-css-assets-webpack-plugin migrate to https://github.com/webpack-contrib/css-minimizer-webpack-plugin

[alexander-akait]

But no problems here, if you need to help please create reproducible test repo, we don't use type: 'module' here

[alexander-akait]

In future please use all fields in the issue, we can't help you without this information

[birdofpreyru]

@evilebottnawi Huge thanks for the remark about migration to css-minimizer!

Regarding this ticket, the problem is that to use this (mini-css-extract-plugin) with Webpack@5, at least in some corner-cases one needs to add resolve.fallback.url: require.resolve('url') to his Webpack config, and install url package as the dependency. It solves the issue for me, but this looks like an avoidable inconvenience, caused by you depending on legacy version of normalize-url.

[alexander-akait]

Oh, yes, I see