新建React应用首次执行npm start启动抛出未处理错误如何解决

报错核心说明 #

你遇到的报错是create-react-app默认启动逻辑触发的问题，错误码ENOENT代表系统找不到指定路径的可执行文件，Node.js子进程尝试调用/usr/bin/firefox打开开发页面时执行失败。结合sudo npm start可正常启动的表现，具体诱因如下：

报错诱因 #

• 普通用户的Shell环境中BROWSER环境变量被配置为/usr/bin/firefox，但该路径下没有安装火狐浏览器，或是普通用户没有该路径的可执行权限
• sudo执行命令时会默认重置用户自定义的环境变量，启动脚本检测不到BROWSER配置就不会尝试自动拉起浏览器，因此仅启动开发服务不会触发报错

解决方案 #

你可以根据自己的使用需求选择任意一种方案解决：

• 关闭自动打开浏览器逻辑
  在项目根目录新建.env文件，添加配置行BROWSER=none，之后执行npm start就只会启动开发服务，不会尝试自动打开浏览器，你手动访问http://localhost:3000即可使用
• 修正默认浏览器的路径配置
  如果你需要自动拉起浏览器，先执行对应命令查询你当前使用的浏览器实际路径：比如Chrome执行which google-chrome，Edge执行which microsoft-edge，获取路径后在你的Shell配置文件（~/.bashrc或~/.zshrc等）中添加一行export BROWSER=你的浏览器实际绝对路径，执行source 对应配置文件生效后再启动项目即可
• 安装火狐浏览器到对应路径
  如果你打算使用火狐作为默认打开的浏览器，直接用系统包管理器安装火狐即可：Debian/Ubuntu系执行sudo apt install firefox，RHEL/CentOS系执行sudo dnf install firefox，安装完成后/usr/bin/firefox路径会自动生成可执行文件，普通用户启动项目就不会再报错

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