Error: Can't resolve 'normalize-url' with CSS HMR enabled

[glen-84]

I'm submitting a bug report

• Library Version: 3.0.0

Please tell us about your environment:

• Operating System: Windows 10

• Node Version: v10.15.3

• NPM Version: 6.4.1

• JSPM OR Webpack AND Version webpack 4.30.0

• Browser: all

• Language: TypeScript 3.4.5

Current behavior:

This error with CSS HMR enabled:

ERROR in ../node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js
Module not found: Error: Can't resolve 'normalize-url' in 'C:\Users\Glen\Desktop\css-hmr-issue\node_modules\mini-css-extract-plugin\dist\hmr'
 @ ../node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js 18:19-43
 @ ./app/styles/main.scss
 @ ./main.ts
 @ ../node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
 @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper

https://github.com/glen-84/css-hmr-issue (npm i, npm start)

(this is a copy of our project that I reduced from ~571 files to 31)

Change hmr: isHot to hmr: false (twice), and the error will go away.

I did not see this error with mini-css-extract-plugin 0.5.0 + css-hot-loader.

Expected/desired behavior:

• What is the expected behavior?

No error.

• What is the motivation / use case for changing the behavior?

n/a

---

See also: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/387

[jods4]

I don't think this is the right repo for this issue.

The webpack plugin does nothing related to HMR. It only manipulates the dependency graph to ensure:

• Dependencies dynamically loaded by Aurelia are properly traced;
• Their name is preserved and their are not affected by ModuleConcatenationPlugin and co.;
• A few modules are magically added before startup to make Aurelia work well w/ Webpack.

So in the end it's just a bunch of dependencies that you might have built manually with tons of per-module configuration.

You might want to move this issue to aurelia/loader-webpack, which is the runtime piece and it contains bits related to HMR. I have zero knowledge of the HMR aspects of our Webpack loader, so hopefully someone else might be able to help.

[glen-84]

I don't think this is the right repo for this issue.

My apologies.

You might want to move this issue to aurelia/loader-webpack, which is the runtime piece ...

It's a build-time error, so I'll assume that it's also not the cause.

[jods4]

I don't think this is the right repo for this issue.

My apologies.

Don't worry, no problem. There are many repos in Aurelia, three just for Webpack (incl. an obsolete one). Sometimes it's can be tricky to find the right repo for a specific issue without knowing Aurelia internals.

It's a build-time error, so I'll assume that it's also not the cause.

Sorry, my bad. I read too fast and I thought this was an exception at runtime, when using HMR.

If I understand correctly, Node fails to find normalize-url, which is required by mini-css-extract-plugin. This is really strange since normalize-url is declared as a dependency: https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/package.json#L44

Do you think I should re-open the issue? This seems like a Node module resolution problem (so npm, yarn and co.) and I have no idea how/why this package might influence this.

If you find that webpack-plugin is involved in the problem in any way I'll gladly fix it.

[glen-84]

This seems to have just stopped happening in the repro project. 😕

I'm going to try it again in our real project, and see what happens.

[jods4]

Can't say it's the first time deleting node_modules, followed by npm install resolves issues 😞

[glen-84]

Please ignore my last comment – I accidentally used npm run build instead of npm start, which is where the issue is (still) happening. 🤦‍♂

[glen-84]

I can swear that I deleted node_modules and package-lock.json yesterday, and it didn't work. I just did it again now (along with npm cache clear --force), and now it's working! 🎉

(sorry about the false alarm)