无法执行npm run start：react-scripts与webpack版本冲突及M1 Mac报错

问题情况 #

• 项目内react-scripts要求的webpack版本与已安装版本存在冲突，修改package.json中的react-scripts为"react-scripts": "^4.0.0"，删除node_modules重装后问题仍未解决
• 使用M1 Mac设备，执行npm run start时出现报错：

npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! eva-community-manager@1.0.0 start: env-cmd -e default npm-run-all -p watch-css start-js
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the eva-community-manager@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! 本次运行的完整日志可在以下路径查看：
npm ERR! /Users/ehabkhan/.npm/_logs/2024-01-30T16_19_56_178Z-debug.log

解决步骤 #

1. 补装缺失依赖 #

报错中的spawn ENOENT通常是启动脚本用到的env-cmd或npm-run-all未安装，执行命令补装：

npm install env-cmd npm-run-all --save-dev

若需全局安装，M1 Mac需添加--location=global：

npm install env-cmd npm-run-all --location=global

2. 彻底清理后重装依赖 #

M1芯片架构可能导致依赖安装异常，按以下步骤操作：

• 删除项目内的node_modules文件夹和package-lock.json文件
• 清空npm缓存：

npm cache clean --force

• 重新安装所有依赖：

npm install

3. 修复webpack版本冲突 #

react-scripts@4.0.0兼容的webpack版本为4.44.2，可直接安装指定版本：

npm install webpack@4.44.2 --save-dev

或在package.json中添加resolutions字段（npm 7及以上版本支持）强制锁定版本：

"resolutions": {
  "webpack": "4.44.2"
}

添加完成后执行npm install即可。

4. M1 Mac专属适配 #

部分依赖在M1芯片上需Rosetta 2支持：

• 找到终端应用，右键选择「显示简介」，勾选「使用Rosetta打开」，重启终端后再运行npm run start
• 若遇到依赖编译失败，安装Xcode命令行工具：

xcode-select --install

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