React项目执行npm run build报错：Cannot find module 'ajv/dist/compile/codegen'

问题详情 #

执行npm run build时触发错误：Cannot find module 'ajv/dist/compile/codegen'，运行npm list ajv查看依赖关系，输出如下：

npm ERR! code ELSPROBLEMS
npm ERR! invalid: ajv@6.12.6 base_directory\node_modules\ajv
atsb@1.0.1 base_directory
`-- react-scripts@5.0.1
  +-- @pmmmwh/react-refresh-webpack-plugin@0.5.15
  | `-- schema-utils@4.3.0
  |   +-- ajv-formats@2.1.1
  |   | `-- ajv@8.17.1
  |   +-- ajv-keywords@5.1.0 invalid: "^3.5.2" from node_modules/file-loader/node_modules/schema-utils
  |   | `-- ajv@6.12.6 deduped invalid: "^8.8.2" from node_modules/ajv-keywords
  |   `-- ajv@8.17.1
  +-- babel-loader@8.4.1
  | `-- schema-utils@2.7.1
  |   +-- ajv-keywords@3.5.2
  |   | `-- ajv@6.12.6 deduped invalid: "^8.8.2" from node_modules/ajv-keywords
  |   `-- ajv@6.12.6 deduped
  +-- eslint@8.57.1
  | +-- @eslint/eslintrc@2.1.4
  | | `-- ajv@6.12.6 deduped
  | `-- ajv@6.12.6
  +-- file-loader@6.2.0
  | `-- schema-utils@3.3.0
  |   `-- ajv@6.12.6 deduped
  +-- react-dev-utils@12.0.1
  | `-- fork-ts-checker-webpack-plugin@6.5.3
  |   `-- schema-utils@2.7.0
  |     +-- ajv-keywords@3.5.2
  |     | `-- ajv@6.12.6 deduped invalid: "^8.8.2" from node_modules/ajv-keywords, ">=8" from node_modules/@apideck/better-ajv-errors
  |     `-- ajv@6.12.6 deduped invalid: "^8.8.2" from node_modules/ajv-keywords
  +-- webpack@5.97.1
  | `-- schema-utils@3.3.0
  |   +-- ajv-keywords@3.5.2
  |   | `-- ajv@6.12.6 deduped invalid: "^8.8.2" from node_modules/ajv-keywords
  |   `-- ajv@6.12.6 deduped
  `-- workbox-webpack-plugin@6.6.1
    `-- workbox-build@6.6.1
      +-- @apideck/better-ajv-errors@0.3.6
      | `-- ajv@6.12.6 deduped invalid: "^8.8.2" from node_modules/ajv-keywords, ">=8" from node_modules/@apideck/better-ajv-errors
      `-- ajv@8.17.1

依赖输出解读 #

• 核心问题：ajv版本冲突，项目同时存在ajv@6.12.6和ajv@8.17.1两个版本，且ajv@6.12.6被标记为invalid，说明它不符合部分依赖的版本要求。
• 冲突原因：
  • 旧版依赖（如schema-utils@2.x/3.x）依赖ajv@6.x，但ajv-keywords@5.1.0、@apideck/better-ajv-errors@0.3.6要求ajv@>=8.x，版本不兼容导致npm依赖解析出错。
  • npm的自动去重（deduped）逻辑错误地让需要高版本ajv的依赖使用了低版本ajv，而ajv/dist/compile/codegen是ajv@8.x才有的模块，因此报错找不到。

解决步骤 #

方法一：强制统一ajv版本 #

1. 清理现有依赖和缓存：

rm -rf node_modules
rm package-lock.json
npm cache clean --force

2. 在package.json中添加版本强制配置：
   添加resolutions字段，强制所有依赖使用ajv@8.17.1：

"resolutions": {
  "ajv": "^8.17.1"
}

3. 安装版本强制工具（npm需要）：

npm install --save-dev npm-force-resolutions

4. 修改package.json的scripts，添加预安装钩子：

"scripts": {
  "preinstall": "npx npm-force-resolutions",
  // 保留原有scripts内容
}

5. 重新安装依赖并构建：

npm install
npm run build

方法二：升级react-scripts到最新兼容版 #

如果方法一无效，尝试升级react-scripts，新版本通常会修复依赖冲突：

npm install react-scripts@latest
npm install
npm run build

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