.NET Core 3.1 React项目运行时SpaServices及浏览器刷新报错求助

报错内容 #

fail: Microsoft.AspNetCore.SpaServices[0]
      (node:15004) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

fail: Microsoft.AspNetCore.SpaServices[0]
      (Use `node --trace-deprecation ...` to show where the warning was created)
(node:15004) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

warn: Microsoft.AspNetCore.Watch.BrowserRefresh.BrowserRefreshMiddleware[4]
      Unable to configure browser refresh script injection on the response. This may have been caused by the response's Content-Encoding: 'gzip'. Consider disabling response compression.

问题分析与解决方案 #

1. Webpack-dev-server 废弃警告问题 #

.NET Core 3.1 配套的 Microsoft.AspNetCore.SpaServices.Extensions 包依赖旧版 webpack-dev-server API，若项目中升级了 react-scripts 或 webpack-dev-server 到高版本，会出现 API 兼容问题，触发废弃警告。

解决方案：

• 方法一：降级 webpack-dev-server 版本
  在项目根目录的 package.json 中指定兼容旧 API 的版本，执行 npm install 生效：

  "devDependencies": {
    "webpack-dev-server": "3.11.2"
  }
  

• 方法二：自定义 webpack 配置替换废弃 API
  若不想降级，可通过 react-app-rewired 修改配置：
  1. 安装依赖：npm install react-app-rewired --save-dev
  2. 项目根目录创建 config-overrides.js，添加如下内容：

     module.exports = function override(config, env) {
       if (env === 'development') {
         config.devServer = {
           ...config.devServer,
           setupMiddlewares: (middlewares, devServer) => {
             // 迁移原 onBeforeSetupMiddleware/onAfterSetupMiddleware 的逻辑到此处
             return middlewares;
           }
         };
       }
       return config;
     };
     

  3. 修改 package.json 启动命令为："start": "react-app-rewired start"

2. 浏览器刷新脚本注入失败警告问题 #

该警告因响应启用 gzip 压缩导致刷新脚本无法注入，可通过两种方式解决：

• 禁用响应压缩：在 Startup.cs 的 ConfigureServices 方法中移除或注释响应压缩服务注册：

  public void ConfigureServices(IServiceCollection services)
  {
      // services.AddResponseCompression(); // 注释此行
      // 其他服务配置
  }
  

• 保留压缩并调整中间件顺序：在 Configure 方法中确保浏览器刷新中间件在压缩中间件前注册：

  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
      // 其他中间件配置
      app.UseBrowserRefresh();
      app.UseResponseCompression();
      // 其他中间件配置
  }
  

3. UseReactDevelopmentServer 无 setUpMiddleware 重载问题 #

.NET Core 3.1 版本的 Microsoft.AspNetCore.SpaServices.Extensions 包未提供该重载，该参数是 .NET 5+ 版本新增的。无需强行使用，通过上述 webpack 配置调整即可解决中间件兼容问题，继续使用默认的 spa.UseReactDevelopmentServer(npmScript: "start"); 即可。

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