Normalize.css: Installing this broke my webpack react config

[yongelee]

Basically my webpack config was running smoothly until I decided to npm install this package. All I did was shut down my dev server, npm install this, then run it again. THen everything broke.

I tried deleting the folder and removing it from my package.json but still broke everything.

I actually can't believe my perfect webpack config with hot reloading and react router broke from just installing this package. Wow it's insane how much a poorly designed module can ruin your whole project.

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js
Module not found: Error: Can't resolve 'babel-loader' in 'C:UsersAlbertDocumentsdotahubclient'
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js
Module not found: Error: Can't resolve 'react-hot-loader/patch' in 'C:UsersAlbertDocumentsdotahubclient'
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js

[jonathantneal]

Wow it's insane how much a poorly designed module can ruin your whole project.

I’m really sorry you’re having a rough day. I’ve had rough days. They suck. So, have you checked if babel-loader is installed?

I imagine that after you uninstalled normalize.css, you hopefully began to suspect that this issue had nothing to do with normalize.css. You probably checked the scripts field in normalize.css’s package.json just to be sure normalize.css doesn’t _do_ anything.

After you reviewed your error logs, noticed that issue with babel-loader, and reflected on how normalize.css really is _just_ a css file, as the project name suggests — I get it — you wanted to let off some steam. After all, you thought installing a module was all that changed.

I hope you don’t really think this is such a bad project. This project is just a CSS file. A helpful CSS file. 😄 Your issue is likely something that happened before or when you shut down your dev server. As the error suggests, you may have to look into babel-loader — maybe reinstall it.

Blame this project or not, I hope your day gets better.

[yongelee]

https://imgur.com/a/TVTJH

picture 1: I yarn add styled-components and run my server again no problem.

picture 2: I npm install --save normalize.css and added 1 package and removed 612 packages? in 11 seconds?

And then im missing webpack when I try and yarn dev again?

So what exactly does this npm module do? Because the readme is not clear.

[garrettw]

@yongelee Forgive me if I'm really far off base as I'm not familiar with webpack... but to me, these screenshots are immediately suspect once I notice that you've been killing webpack (or something) with Ctrl-C. I could easily imagine that breaking things.

[yongelee]

you are off base because no that doesn't do anything.

[jonathantneal]

Again, this issue is unrelated to normalize.css, but I recommend you check your version of npm by running npm -v. If you’re using version 5.x, I recommend updating to the latest version of npm by running npm install -g npm. After that, I recommend removing the node_modules directory, and then running npm install again.

If you see errors like Cannon find modules 'SOME_MODULE_NAME' (where SOME_MODULE_NAME is the name of a module) then be sure that module is installed and listed in your package.json file. If it is installed, and you still see problems, consider filing an issue with those projects. I only say this because, in your last screenshot of errors, the console said webpack could not be found.

[yongelee]

I didn't have this issue until I tried installing this module. I didn't have any issues related to this before I installed this module. Why would my webpack module stop working after I installed this module? That's my question. Everything was working perfectly. So what does this module do to a project? You didn't answer that and it's not on the readme.

edit: well sorry for being salty but my project is fixed now. I uninstalled and reinstalled every module basically until it started working again. Either way I have no idea why this happened.

[garrettw]

So what does this module do to a project? You didn't answer that and it's not on the readme.

But it _is_ in package.json 😉 Go look at it for yourself and see that it doesn't do anything.

[andyjansson]

@yongelee the reason you're having issues is because you're using both npm and yarn at the same time; they do not share lock files. Use one or the other, not both.

This issue has nothing to do with normalize.css.

[jonathantneal]

@yongelee, I hope we were able to help you.

[yongelee]

Well kind of. I yarn add normalize.css and everything worked fine.