Razor页面加载React组件报错：Uncaught ReferenceError: exports is not defined

我在Razor页面中尝试加载React组件，已将App.jsx通过Babel编译为App.js，但用<App></App>标签引入后页面空白，浏览器控制台抛出Uncaught ReferenceError: exports is not defined错误。在Opera和Chrome测试结果一致，同时尝试导入Child组件时也因import无法使用失败，推测是模块配置问题。

提供的代码文件 #

App.jsx

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { message: 'Hello, World!' };
    }

    render() {
        return (
            <div>
                <h1>{this.state.message}</h1>
            </div>
        );
    }
}

export default App;

App.js（编译后）

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, World!'
    };
  }
  render() {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, this.state.message));
  }
}
var _default = App;
exports.default = _default;

index.cshtml

@using Microsoft.AspNetCore.NodeServices

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>


<script src="@Url.Content("~/js/build/App.js")" ></script>

<App></App>

babel.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
          "opera": "54"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

package.json

{
  "devDependencies": {
    "@babel/cli": "^7.20.7",
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "scripts": {
    "build": "babel SportData.Web/wwwroot/js --out-dir SportData.Web/wwwroot/js/build --presets @babel/preset-react"
  }
}

Program.cs相关代码

app.UseReact(config => {
            config.AddScript("~/js/build/App.js");
        });

核心问题分析 #

1. 浏览器不支持CommonJS模块语法：Babel默认编译出带exports的CommonJS模块代码，浏览器原生无法识别，直接报错。
2. React组件不能直接用HTML标签渲染：<App></App>不是有效HTML标签，React组件必须通过ReactDOM.render手动挂载到DOM节点。
3. Babel配置不完整：配置文件未添加@babel/preset-react，仅靠命令行参数容易出现兼容问题；且未指定模块输出格式。
4. UseReact中间件误用：该中间件用于React服务器端渲染（SSR），纯客户端渲染场景下无需配置，反而可能引发冲突。

修复步骤 #

1. 修正Babel配置，适配浏览器环境 #

更新babel.config.json，添加React预设并指定输出为UMD格式（兼容浏览器全局变量）：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
          "opera": "54"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5",
        "modules": "umd" // 编译为浏览器可识别的UMD模块
      }
    ],
    "@babel/preset-react" // 显式添加React预设，确保JSX编译正确
  ]
}

2. 调整App.jsx，将组件暴露到全局 #

补充React依赖导入，并将组件挂载到window对象，方便浏览器访问：

import React, { Component } from 'react'; // 必须导入React，否则编译后找不到Component

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { message: 'Hello, World!' };
    }

    render() {
        return (
            <div>
                <h1>{this.state.message}</h1>
            </div>
        );
    }
}

// 将组件暴露到全局window对象
window.App = App;
export default App;

3. 修改Razor页面，手动挂载React组件 #

替换无效的<App></App>标签，创建DOM容器并通过ReactDOM.render挂载组件：

@using Microsoft.AspNetCore.NodeServices

<!-- 使用与package.json一致的React版本，避免兼容性问题 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.development.js"></script>

<script src="@Url.Content("~/js/build/App.js")" ></script>

<!-- 创建React组件挂载容器 -->
<div id="app-root"></div>

<script>
    // 手动挂载React组件到DOM容器
    ReactDOM.render(
        React.createElement(window.App),
        document.getElementById('app-root')
    );
</script>

4. 优化package.json的build命令 #

因为已在Babel配置中添加React预设，命令行无需重复指定：

"scripts": {
  "build": "babel SportData.Web/wwwroot/js --out-dir SportData.Web/wwwroot/js/build"
}

5. 移除Program.cs中的UseReact配置 #

纯客户端渲染场景下，该配置无意义，直接删除：

// 删除以下代码
// app.UseReact(config => {
//     config.AddScript("~/js/build/App.js");
// });

6. 解决组件导入问题（如需引入Child组件） #

浏览器原生不支持import语法，需用Webpack打包所有依赖。创建webpack.config.js：

const path = require('path');

module.exports = {
  entry: './SportData.Web/wwwroot/js/App.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'SportData.Web/wwwroot/js/build')
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

更新package.json的build命令为Webpack打包：

"scripts": {
  "build": "webpack --mode production"
}

之后在Razor页面引入打包后的bundle.js即可。

验证步骤 #

1. 运行npm run build重新编译代码。
2. 启动Asp.Net Core项目。
3. 打开浏览器控制台，确认无报错，页面正常显示Hello, World!。

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