React - 未捕獲的 ReferenceError：未定義導出

Question

我想在 razor 頁面上加載 ReactJS 組件。 我有我的 App.jsx 文件，我用 Babel 在 App.js 文件中解析它。 所以下一步應該是將它導入 razor 頁面作為標簽，如''但是當我運行項目時頁面是空白的並且檢查員的控制台拋出：'Uncaught ReferenceError：exports is not defined'。 我搜索了很多，認為問題出在瀏覽器上？但是用 opera 和 chrome 測試我得到了相同的結果。 也許我的項目設置對使用模塊無效？其他測試的原因，如果我嘗試將組件子項導入到應用程序，它會由於導入無法使用而失敗。 如果我忘記了任何重要文件，請告訴我

應用程序.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;

應用程序.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;

索引.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");
        });

Answer 1

通過在 _Layout.cshtml 中添加<script>var exports = {};</script>解決