升级依赖后React项目加载失败：找不到postcss-normalize模块

环境信息 #

• Node.js: v16.16.0
• Yarn: 1.22.19

报错详情 #

ERROR in ./src/index.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/index.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/nnn/1work/app-ui/node_modules/postcss-loader/dist/utils.js
- /Users/nnn/1work/app-ui/node_modules/postcss-loader/dist/index.js
- /Users/nnn/1work/app-ui/node_modules/postcss-loader/dist/cjs.js
- /Users/nnn/1work/app-ui/node_modules/loader-runner/lib/loadLoader.js
- /Users/nnn/1work/app-ui/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/nnn/1work/app-ui/node_modules/webpack/lib/NormalModule.js
- /Users/nnn/1work/app-ui/node_modules/webpack-manifest-plugin/dist/index.js
- /Users/nnn/1work/app-ui/node_modules/react-scripts/config/webpack.config.js
- /Users/nnn/1work/app-ui/node_modules/react-scripts/scripts/start.js

(@/Users/nnn/1work/app-ui/src/index.css)

模块存在情况 #

执行查找命令后，确认模块存在于react-scripts的子依赖目录中：

$ find node_modules  -name 'postcss-normalize'
node_modules/react-scripts/node_modules/postcss-normalize

项目依赖配置（package.json） #

"dependencies": {
    "@auth0/auth0-react": "2.2.1",
    "buffer": "^6.0.3",
    "crypto": "npm:crypto-browserify",
    "crypto-browserify": "^3.12.0",
    "framer-motion": "10.16.1",
    "jsonwebtoken": "9.0.1",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.43",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-router-dom": "6.15.0",
    "react-scripts": "5.0.1",
    "react-toastify": "9.1.3",
    "sass": "1.66.1",
    "stream": "^0.0.2",
    "util": "^0.12.5",
    "web-vitals": "3.4.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "6.1.0",
    "@testing-library/react": "14.0.0",
    "@testing-library/user-event": "14.4.3",
    "husky": "8.0.3",
    "jest-junit": "16.0.0",
    "jest-sonar-reporter": "2.0.0",
    "lint-staged": "14.0.1",
    "prettier": "3.0.2"
  }

已尝试操作 #

• 升级Node.js版本，问题未解决

解决建议 #

• 手动安装postcss-normalize到项目根依赖：Yarn 1的依赖扁平化规则可能未将该模块提升至根目录，导致postcss-loader无法找到。执行命令：

  yarn add postcss-normalize --save-dev
  

• 清除缓存并重新安装依赖：

  1. 删除node_modules文件夹：rm -rf node_modules
  2. 删除yarn.lock文件：rm yarn.lock
  3. 重新安装依赖：yarn install
     重新梳理依赖结构，解决可能的扁平化异常问题。

• 升级react-scripts版本：当前使用的5.0.1版本可能存在依赖管理bug，升级至最新5.x版本：

  yarn upgrade react-scripts@latest
  

• 检查自定义PostCSS配置：若项目存在postcss.config.js，确认是否显式引用postcss-normalize，并检查路径配置是否正确。

内容的提问来源于stack exchange，提问作者user3552178