React项目启动报错：找不到workbox-webpack-plugin模块

报错信息 #

PS C:\able-pro-material-react> npm start 

> able-pro-material-react@9.1.0 start
> react-app-rewired start

node:internal/modules/cjs/loader:1080
  throw err;
  ^

Error: Cannot find module 'workbox-webpack-plugin'
Require stack:
- C:\able-pro-material-react\config-overrides.js
- C:\able-pro-material-react\node_modules\react-app-rewired\config-overrides.js
- C:\able-pro-material-react\node_modules\react-app-rewired\scripts\start.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Module._load (node:internal/modules/cjs/loader:922:27)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (C:\able-pro-material-react\config-overrides.js:2:23)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\able-pro-material-react\\config-overrides.js',
    'C:\\able-pro-material-react\\node_modules\\react-app-rewired\\config-overrides.js',
    'C:\\able-pro-material-react\\node_modules\\react-app-rewired\\scripts\\start.js'
  ]
}

Node.js v18.16.1

问题分析 #

报错核心是项目依赖的workbox-webpack-plugin模块缺失，该模块被项目根目录的config-overrides.js文件直接引用。你之前安装webpack的操作无法解决此问题，因为缺失的是webpack的特定插件，而非webpack本身。

解决方案 #

1. 安装缺失的插件 #

在项目根目录执行以下命令，将workbox-webpack-plugin安装为开发依赖：

npm install --save-dev workbox-webpack-plugin

2. 若安装后仍报错，尝试重置依赖 #

如果安装插件后问题依旧，可能是依赖缓存或node_modules损坏，执行以下步骤：

• 删除node_modules文件夹和锁文件：
  Windows系统：

  rmdir /s /q node_modules
  del package-lock.json
  

  macOS/Linux系统：

  rm -rf node_modules package-lock.json
  

• 重新安装所有依赖：

  npm install
  

• 再次启动项目：

  npm start
  

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