我想在Razor页面上加载一个ReactJS组件。我有我的App.jsx文件，我用Babel在App.js文件中解析它。所以下一步应该是在Razor页面中导入它，作为一个类似""的标记，但是当我运行项目时，页面是空白的，检查器的控制台抛出：'未捕获的引用错误：exports is not defined '.我搜索了很多，认为问题是浏览器？但测试与opera和chrome我有相同的结果.也许我的项目的设置是无效的使用模块？原因为其他测试，如果我试图导入一个组件子应用程序失败，由于导入无法使用.如果我忘记了任何重要的文件，请让我知道
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中导入js文件：

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