.NET Core+React+NextJS项目出现TypeError: _interop_require_default._ is not a function错误

核心问题定位 #

错误源于NextJS的app-router-context.shared-runtime.js中调用_interop_require_default._(require("react"))时，与@swc/helpers的函数实现不兼容，本质是.NET Core SPA模板与NextJS的模块交互逻辑冲突导致的。

可行修复方案 #

• 调整NextJS的SWC配置
  在项目根目录创建next.config.js，添加SWC的interop兼容配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    swcMinify: true,
    experimental: {
      esmExternals: 'loose',
      interopDefault: true
    }
  }
  
  module.exports = nextConfig
  

• 锁定@swc/helpers兼容版本
  在package.json中直接指定兼容的@swc/helpers版本：

  "dependencies": {
    "@swc/helpers": "^0.5.1"
  }
  

  执行npm install重新安装依赖。

• 修改.NET Core SPA的代理配置
  在Program.cs（.NET 6+）或Startup.cs中，调整SPA代理逻辑，避免路由冲突：

  app.UseSpa(spa =>
  {
      spa.Options.SourcePath = "ClientApp";
  
      if (env.IsDevelopment())
      {
          spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
      }
  });
  

• 彻底清理重建项目
  依次执行以下命令清除缓存并重建：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  dotnet clean
  dotnet build
  

额外注意事项 #

• 确保React版本≥18.2.0、NextJS版本≥13.0.0，版本不匹配会加剧兼容性问题
• 避免在同一项目中混合使用NextJS App Router和传统React Router，优先选择单一路由方案实现导航

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