npm start启动React 18.2.0新项目报错 无法访问localhost

控制台打印的两条webpack-dev-server相关的DeprecationWarning不是服务无法访问的诱因。这是react-scripts 5.0.1版本的已知兼容问题：该版本依赖的webpack-dev-server已经弃用了onAfterSetupMiddleware、onBeforeSetupMiddleware两个配置项，但react-scripts本身还没同步更新配置，属于非阻断性警告，完全不会影响开发服务的正常启动。

服务无法自动打开、localhost访问失败属于其他配置或环境问题，按以下顺序排查即可：

• 排查端口占用问题
  CRA创建的项目默认会占用3000端口启动服务，如果3000端口被其他进程（之前未正常退出的node服务、其他本地开发项目、代理/VPN软件）占用，就会出现启动无明确报错但无法访问的情况。
  操作方式：
  1. 按Ctrl+C终止当前运行的npm start进程
  2. 根据系统执行对应命令查询3000端口占用情况：
     • Windows系统执行：netstat -ano | findstr :3000
     • Mac/Linux系统执行：lsof -i :3000
  3. 拿到返回结果里的进程PID后，执行命令杀掉占用进程：
     • Windows系统执行：taskkill /F /PID <你查到的PID数值>
     • Mac/Linux系统执行：kill -9 <你查到的PID数值>
  4. 重新执行npm start启动服务测试
• 排查本地Host配置异常
  如果系统hosts文件被篡改，或者本地配置了全局HOST环境变量，会导致服务绑定到不可访问的地址上。
  操作方式：
  1. 打开系统hosts文件检查：Windows路径为C:\Windows\System32\drivers\etc\hosts，Mac/Linux路径为/etc/hosts，确认文件中存在未被注释的127.0.0.1 localhost配置项
  2. 手动指定绑定地址和端口启动测试：
     • Windows系统执行：set HOST=127.0.0.1&&set PORT=3333&&npm start
     • Mac/Linux系统执行：HOST=127.0.0.1 PORT=3333 npm start
       启动后直接访问http://127.0.0.1:3333验证是否能正常加载页面
• 排查依赖安装损坏问题
  如果首次执行npx create-react-app时网络不稳定，会导致部分依赖包下载不完整，虽然能执行启动命令，但服务无法正常初始化。
  操作方式：
  1. 删除项目根目录下的node_modules文件夹和package-lock.json文件
  2. 重新在项目目录执行npm install等待依赖安装完成
  3. 再次执行npm start启动服务

注：开头提到的两个弃用警告无需额外处理，既不影响功能也不影响开发，等react-scripts后续版本更新兼容webpack-dev-server新配置后会自动消失，不要为了消除警告随意修改node_modules内的源码，反而会引发其他未知问题。

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