I get an error when using the command "npm run start" for my react project

Question

I am new to coding and would appreciate some help with this I get the following error when I try to run my react app: npm run start

Failed to compile.

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

• /Users/abc/node_modules/postcss-loader/dist/utils.js
• /Users/abc/node_modules/postcss-loader/dist/index.js
• /Users/abc/node_modules/postcss-loader/dist/cjs.js
• /Users/abc/node_modules/loader-runner/lib/loadLoader.js
• /Users/abc/node_modules/loader-runner/lib/LoaderRunner.js
• /Users/abc/node_modules/webpack/lib/NormalModule.js
• /Users/abc/node_modules/webpack-manifest-plugin/dist/index.js
• /Users/abc/node_modules/react-scripts/config/webpack.config.js
• /Users/abc/node_modules/react-scripts/scripts/start.js

(@/Users/abc/node_modules/bootstrap/dist/css/bootstrap.css)

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.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/bootstrap/dist/css/bootstrap.css)

./node_modules/bootstrap/dist/css/bootstrap.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/bootstrap/dist/css/bootstrap.css)

Module Error (from ./node_modules/postcss-loader/dist/cjs.js): Loading PostCSS "postcss-normalize" plugin failed: Cannot find module 'postcss-normalize' Require stack:

• /Users/abc/node_modules/postcss-loader/dist/utils.js
• /Users/abc/node_modules/postcss-loader/dist/index.js
• /Users/abc/node_modules/postcss-loader/dist/cjs.js
• /Users/abc/node_modules/loader-runner/lib/loadLoader.js
• /Users/abc/node_modules/loader-runner/lib/LoaderRunner.js
• /Users/abc/node_modules/webpack/lib/NormalModule.js
• /Users/abc/node_modules/webpack-manifest-plugin/dist/index.js
• /Users/abc/node_modules/react-scripts/config/webpack.config.js
• /Users/abc/node_modules/react-scripts/scripts/start.js

(@/Users/abc/node_modules/bootstrap/dist/css/bootstrap.css)

Thank you so much

I've tried updating to the latest version of node and npm, however, that did not help. I've also verified my code several times as I'm mostly practicing along with a course. Thank you.

Answer 1

As it appears this error will temporarily get fixed by installing the latest version of Node.js.

So to fix this follow these steps:

Download and install the latest Node.js version (recommended for most users, which is 16.15.0 at this moment). Delete your node_modules directory from your project. Then you can optionally clear npm cache with npm cache clean and verify it with npm cache verify. Delete package-lock.json/yarn.lock file. Reinstall all of the dependencies and create a new dependency tree using one of the following commands: npm i/npm install/yarn/yarn install. Note1: If in any case, you use node-sass in React projects yet, it is recommended to use sass instead.

Note2: In some cases skipping step 1 will also work as expected, but I recommend upgrading the Node.js version if you do not have other dependencies to prevent that.

Note3: As @IvaniltonBezerra mentions in the comments, some app builds may throw errors, since upgrading Node.js to its latest version will upgrade the npm as well it may not compatible with your current dependency tree in production, so to prevent such a problem you have to use --legacy-peer-deps to restore the old behaviour of the old dependencies.

Update This is now seem to be permanently solved in PostCSS Preset Env and following the above steps with skipping step 1 will also solve the problem.