CRA如何修复DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE警告

这个警告属于依赖链兼容问题，即使你没有直接配置Webpack、用的是原生CRA初始化的项目也可能触发，本质是react-scripts依赖的webpack-dev-server版本调用了即将废弃的钩子API，属于提示类警告，不会影响项目正常开发运行和生产打包结果。

可选修复方案 #

• 方案1：升级react-scripts到最新稳定版（优先推荐）
  新版react-scripts已经适配了webpack-dev-server的新API，从根源修复了警告触发问题，执行对应包管理工具的升级命令即可：

  # npm 用户
  npm install react-scripts@latest --save-dev
  # yarn 用户
  yarn add react-scripts@latest --dev
  # pnpm 用户
  pnpm add react-scripts@latest -D
  

  命令执行完成后，删除项目下的node_modules文件夹和对应锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新安装依赖后重启开发服务即可。

• 方案2：强制锁定兼容版本的webpack-dev-server（适合老项目无法升级react-scripts的场景）
  如果项目依赖老版本react-scripts，升级会触发其他兼容问题，可以通过包管理器的版本强制覆盖功能，把webpack-dev-server锁定到修复了弃用提示的版本：

  1. npm v8+、pnpm用户：在项目根目录package.json中添加overrides配置

     {
       "overrides": {
         "react-scripts": {
           "webpack-dev-server": "4.15.1"
         }
       }
     }
     

  2. Yarn用户：在项目根目录package.json中添加resolutions配置

     {
       "resolutions": {
         "webpack-dev-server": "4.15.1"
       }
     }
     

  配置完成后同样删除node_modules和锁文件，重新安装依赖重启服务即可消除警告。

• 方案3：临时过滤警告（仅临时开发使用，不推荐）
  该警告不会影响实际功能，如果暂时不想调整依赖，可以修改启动脚本过滤对应日志输出：

  {
    "scripts": {
      "start": "react-scripts start 2>&1 | grep -v 'DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE'"
    }
  }
  

  注意：Windows系统默认不支持grep命令，需替换为findstr，或使用跨平台日志过滤工具实现。

内容的提问来源于stack exchange，提问作者maxim.saharov