.NET Core集成React遇WebPack构建失败及TypeError问题求助

我之前在配置.NET Core项目整合React时，也碰到过几乎一模一样的错误，折腾了好一阵才解决，分享几个亲测有效的排查步骤：

1. 先解决"mode未设置"的警告（避免干扰排查） #

这个警告虽然不是直接导致构建失败的原因，但先把它处理掉能让控制台信息更清晰。在你的webpack.config.js里添加mode配置：

module.exports = {
  mode: 'development', // 生产环境用'production'
  // 其他原有配置...
};

2. 核心解决：TypeError: Cannot read property 'ts' of undefined #

这个错误90%以上是ts-loader与Webpack、TypeScript的版本不兼容，或者配置遗漏导致的，按下面的步骤逐一排查：

步骤2.1 强制安装版本匹配的依赖包 #

不同版本的Webpack对ts-loader的要求不一样：

• Webpack 5 需要 ts-loader 9.x 及以上
• Webpack 4 需要 ts-loader 8.x 及以下

先卸载现有冲突的包，再重新安装匹配的版本：

# 卸载现有包
npm uninstall ts-loader webpack webpack-cli typescript

# 安装Webpack 5 + 兼容的依赖（示例）
npm install --save-dev ts-loader@^9 webpack@^5 webpack-cli@^4 typescript@^4

步骤2.2 检查Webpack的ts-loader规则配置 #

确保你的webpack配置里正确识别了.tsx/.ts文件，并且resolve扩展名包含它们：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.tsx?$/, // 匹配.ts和.tsx文件
        use: 'ts-loader',
        exclude: /node_modules/, // 排除node_modules目录
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'], // 让Webpack能解析这些扩展名的文件
  },
};

步骤2.3 验证tsconfig.json的正确性 #

确保TypeScript配置能覆盖到你的React组件文件，并且开启了必要的JSX支持：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react", // 必须开启，否则无法编译React的TSX文件
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["ClientApp/**/*"] // 确保包含你的tsx文件所在目录
}

步骤2.4 检查Webpack的Entry配置 #

从你的控制台信息看，入口是./ClientApp/Home/home.tsx，要确保webpack的entry路径完全正确，比如：

const path = require('path');

module.exports = {
  entry: {
    global: './ClientApp/Home/home.tsx',
  },
  output: {
    filename: '[name]-bundle.js',
    path: path.resolve(__dirname, 'wwwroot/dist'), // 输出到.NET Core的wwwroot目录下，根据你的需求调整
  },
  // ...其他配置
};

3. 终极排查：清理缓存重新安装 #

如果上面的步骤都没用，大概率是依赖缓存的问题，执行以下操作：

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json

# 重新安装依赖
npm install

# 重新运行webpack构建
npx webpack

按照这个流程走下来，应该能解决你碰到的构建失败问题。

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