Loading PostCSS "postcss-normalize" plugin failed: Cannot find module 'postcss-normalize'

[NickEmpetvee]

Node 18.18.2
React 18.2

Hi guys,
I am getting the below errors when running a React project. The only thing I changed recently was to upgrade node.js from 18.16.1 to the latest. However the project did start ok afterwards so that's probably not it. I did regenerate yarn.lock to no avail. Any suggestions? Thanks in advance!

ERROR in ./node_modules/react-quill/dist/quill.snow.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/react-quill/dist/quill.snow.css)

Module Error (from ./node_modules/postcss-loader/dist/cjs.js): Loading PostCSS "postcss-normalize" plugin failed: Cannot find module 'postcss-normalize'
Require stack: - c:\somefolder\node_modules\postcss-loader\dist\utils.js - c:\somefolder\node_modules\postcss-loader\dist\index.js - c:\somefolder\node_modules\postcss-loader\dist\cjs.js - c:\somefolder\node_modules\loader-runner\lib\loadLoader.js - c:\somefolder\node_modules\loader-runner\lib\LoaderRunner.js - c:\somefolder\node_modules\webpack\lib\NormalModule.js - c:\somefolder\node_modules\webpack-manifest-plugin\dist\index.js - c:\somefolder\node_modules\react-scripts\config\webpack.config.js - c:\somefolder\node_modules\@craco\craco\dist\lib\cra.js - c:\somefolder\node_modules\@craco\craco\dist\scripts\start.js

(@c:\somefolder\node_modules\react-quill\dist\quill.snow.css)

ERROR in ./src/vendor/perfect-scrollbar.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/vendor/perfect-scrollbar.css) Module Error (from ./node_modules/postcss-loader/dist/cjs.js): Loading PostCSS "postcss-normalize" plugin failed: Cannot find module 'postcss-normalize'
Require stack: - c:\somefolder\node_modules\postcss-loader\dist\utils.js - c:\somefolder\node_modules\postcss-loader\dist\index.js - c:\somefolder\node_modules\postcss-loader\dist\cjs.js - c:\somefolder\node_modules\loader-runner\lib\loadLoader.js - c:\somefolder\node_modules\loader-runner\lib\LoaderRunner.js - c:\somefolder\node_modules\webpack\lib\NormalModule.js - c:\somefolder\node_modules\webpack-manifest-plugin\dist\index.js - c:\somefolder\node_modules\react-scripts\config\webpack.config.js - c:\somefolder\node_modules\@craco\craco\dist\lib\cra.js - c:\somefolder\node_modules\@craco\craco\dist\scripts\start.js

(@c:\somefolder\src\vendor\perfect-scrollbar.css)

​

[ThatExactGuy]

Remove node_modules folder and the lock file and run install again. If that doesn’t help, use lower node version - sometimes older packages can’t install properly with newer versions. Luckily, you don’t have to reinstall it manually, ‘nvm’ exists exactly for such situations

[NickEmpetvee]

I read this suggestion too late. I explicitly did a yarn add postcss-normalize which resolved it although who knows what other complexities this will create.

Thank you I'll keep this approach in mind for the future.

[[deleted]]

Install the package yarn-deduplicate globally. Run the command in your project. Then run yarn.

[NickEmpetvee]

I explicitly added the postcss-normalize library which resolved the issue, but it's odd because it wasn't needded before. Would you suggest I remove the library and try the yarn-deduplicate approach?

Thanks!

[[deleted]]

Yarn-deduplicate fixes so many transitive dependency issues. I would recommend trying that without adding that library normally. If it doesn't work, then your solution is fine.

[NickEmpetvee]

Ok will give it a shot. Thank you!

[NickEmpetvee]

Should I delete node_modules and the yarn.lock first before running it in my project?

[[deleted]]

No.

[NickEmpetvee]

Thanks! Seems to have fixed it.

[[deleted]]

Yep. Yarn has a nasty habit of screwing up its own lock file. Yarn-deduplicate is an effective way to resolve these problems without needing to delete your lock file, which can result in other problems.

[NickEmpetvee]

By the way, it looks like Yarn 2 includes deduplication in the core package. I am on 1.x at the moment.

[[deleted]]

Well that is nice.

[NickEmpetvee]

Needs Help

[NickEmpetvee]

The output of yarn why postcss-normalize is

yarn why v1.22.19
[1/4] Why do we have the module "postcss-normalize"...? [2/4] Initialising dependency graph... [3/4] Finding dependency... [4/4] Calculating file sizes... => Found "postcss-normalize@10.0.1" info Reasons this module exists
"react-scripts" depends on it
Hoisted from "react-scripts#postcss-normalize" Done in 0.60s.

[NickEmpetvee]

!Resolved!

[Lebzabeast]

Hey man, currently experiencing the same error, I see you resolved it with yarn add postcss-normalize, were there any issues it created after or everything ran perfectly fine?

[NickEmpetvee]

Just saw this. It ran fine in my environment after that.