React项目开发时npm中断报错 frontend@0.1.0启动脚本失败如何解决

你当前终端输出的是npm的通用兜底报错，不是问题根因，真正的错误信息藏在提示的日志文件里，按以下步骤逐一排查即可：

• 先定位真实报错：直接打开路径C:\Users\wthil\AppData\Roaming\npm-cache\_logs\2022-06-26T18_42_00_220Z-debug.log，翻到文件末尾往上找，去掉带npm ERR!前缀的npm通用提示，剩下的来自react-scripts、webpack、babel的输出就是真正的崩溃原因，常见根因包括依赖损坏、Node版本不兼容、端口占用、代码语法错误。
• 优先修复依赖损坏问题：这是突发启动崩溃的最高发原因，直接删除项目根目录下的node_modules文件夹、package-lock.json文件，在终端执行以下命令清理缓存后重装依赖：

npm cache clean --force
npm install

依赖重装完成后再执行npm start测试是否恢复正常。

• 修复Node版本兼容问题：如果你本地安装的Node.js是17及以上版本，且项目使用的react-scripts版本为4.x及以下，会因为OpenSSL版本兼容问题直接启动崩溃，临时修复可以修改package.json里的start脚本：

"start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start"

长期修复方案可以选择将react-scripts升级到5.x以上版本，或者将本地Node.js降级到16.x LTS长期支持版本。

• 排查端口占用问题：旧版本react-scripts遇到3000端口被占用时不会弹出交互提示，会直接异常退出，在终端执行以下命令查找占用3000端口的进程并强制关闭，再重启项目：

netstat -ano | findstr :3000
taskkill /PID 上一步查到的进程ID /F

• 排查代码错误：如果崩溃出现在代码改动之后，重点检查最近修改的文件是否存在语法错误、导入路径写错、模块导入导出不匹配的问题，这类问题在旧版本构建工具中不会抛出明确的代码错误提示，只会导致启动进程直接退出。

React项目启动报错终端参考截图

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