Laravel+React项目执行npm run watch无报错但无法正常运行如何解决

根因说明 #

该问题由npm audit fix --force强制升级依赖版本导致，升级后的依赖和项目当前使用的laravel-mix、webpack版本不兼容，因此执行编译命令时会出现无响应的情况，重装全局Node.js/npm无法解决本地项目的依赖版本冲突问题。

分步修复操作 #

• 第一步：完全清理本地项目的依赖与缓存
  在项目根目录依次执行以下命令：

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

• 第二步：修正package.json中的依赖版本
  找项目中可以正常运行编译命令的同事，同步对方package.json里以下依赖的版本号，替换你本地文件中被强制升级后的版本：
  • laravel-mix
  • webpack
  • cross-env
  • 所有@babel开头的相关依赖
• 第三步：重新安装项目依赖
  执行以下命令完成依赖安装，不要附加任何额外参数：

  npm install
  

• 第四步：验证编译功能
  先执行npm run dev确认可以正常走完编译流程，没有报错后再测试npm run watch命令即可。

备选排查方案 #

如果上述操作完成后问题仍存在，按以下顺序排查：

• 临时关闭本机杀毒软件、防火墙，部分安全工具会拦截webpack的端口监听逻辑，导致启动无响应
• 确认本地Node.js版本和其他正常运行的同事版本一致，laravel-mix v6要求Node.js版本≥12.14，版本过低也会出现兼容问题，可通过nvm切换对应版本后重试
• 避免使用XAMPP、PHPStorm自带的终端执行命令，改用系统管理员权限运行的CMD/PowerShell操作，排除环境变量冲突的影响

内容的提问来源于stack exchange，提问作者B. Bakker