Javascript 其中'；我的React索引上有什么语法错误？

我正在尝试使用Electron和React构建一个简单的托盘计时器应用程序，但当我启动web dev服务器时，会发生以下错误：

./src/index.js中出现错误
模块构建失败（来自./node_modules/babel loader/lib/index.js）：
语法错误：D:\Documents\Electron\udemy\third\u app\src\index.js:意外标记（8:2）

index.js：

1 import ReactDOM from "react-dom";
2 import { HashRouter as Router, Route } from "react-router-dom";
3
4 import App from "./components/App";
5
6 ReactDOM.render(
7 <Router>
8    <Route
9    component={() => (
10        <App />
11    )}
12    />
13 </Router>,
14 document.getElementById("root")
15 );

编辑

我已卸载@的babel软件包，但如何解决webpack.config.js上的查询问题

错误：未使用加载器提供选项/查询（使用加载器+选项）

编辑2

---

我已将所有babel-packages升级到新的^7.+版本，但babel将“预置”改为“插件”

为您的babelrc文件提供babel预置react应用程序，以便将jsx（类似HTML）代码转换为javascript。

已解决！这些都是错误：

1-babel软件包已被弃用，因此我已升级

2-babel的输出为我的.babelrc文件提供了一个解决方案，如下所示：

{
    "presets": [
    "@babel/preset-env",
    "@babel/preset-reacty"
    ],
    "plugins": [
    // Stage 1
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
    ["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
    "@babel/plugin-proposal-do-expressions",

    // Stage 2
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",

    // Stage 3
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
    "@babel/plugin-proposal-json-strings"
    ]
}

---

您的绑定器似乎没有配置为使用JSX。你在用巴贝尔吗？当然。

是JSX，不是标准的JS——你要么自己编写真正的JS（使用

createElement

），要么先将JSX传输到JS（手动或作为捆绑任务的一部分）。是的，我使用的是babel。我改变了一些我不知道是否会影响它的东西。看我的编辑。在我看来，它好像缺少了反应预设。快速查看您的webpack.config，就会发现它已被注释掉。有什么原因吗？也许从一个新的网页配置开始，获取最新版本的东西

{
    "presets": [
    "@babel/preset-env",
    "@babel/preset-reacty"
    ],
    "plugins": [
    // Stage 1
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
    ["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
    "@babel/plugin-proposal-do-expressions",

    // Stage 2
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",

    // Stage 3
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
    "@babel/plugin-proposal-json-strings"
    ]
}