Node.js 来自网页包的意外令牌错误

我已经看到了一些类似于此的问题，但到目前为止没有一个解决方案起到作用。我正在努力加快反应速度。我已经试着遵循我在网上找到的每一个教程，包括一些非常简单、直接的教程。不管我怎么尝试，我总是会遇到一个意外的令牌错误

index.js：

import React from "react";
import ReactDOM from "react-dom";

const title = 'My React page';

ReactDOM.render(
  <div>{title}</div>,
  document.getElementById('app')
)

webpack.config.js：

const webpack = require('webpack');

module.exports = {
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: ['babel-loader']
      },
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
};

.LRC：

{
    "presets": [
        "env", 
        "react", 
        "es2015", 
        "stage-2"
    ]
}

错误：

ERROR in ./src/index.js
Module build failed: SyntaxError: D:/work/swvreact/swvreact/src/index.js: 
Unexpected token (7:4)

   5 |
   6 | ReactDOM.render(
>  7 |     <div>{title}</div>,
     |     ^
   8 |     document.getElementById('app')
   9 | )
  10 |

BabelLoaderError: SyntaxError: D:/work/swvreact/swvreact/src/index.js: 
Unexpected token (7:4)

   5 |
   6 | ReactDOM.render(
>  7 |     <div>{title}</div>,
     |     ^
   8 |     document.getElementById('app')
   9 | )
  10 |

    at transpile (D:\work\swvreact\swvreact\node_modules\babel- 
   loader\lib\index.js:65:13)

./src/index.js中的

错误
模块生成失败：语法错误：D:/work/swvreact/swvreact/src/index.js:
意外标记（7:4）
5 |
6 | ReactDOM.render(
>7 |{title}，
|     ^
8 | document.getElementById（'app'）
9 | )
10 |
BabelLoaderError:SyntaxError:D:/work/swvreact/swvreact/src/index.js:
意外标记（7:4）
5 |
6 | ReactDOM.render(
>7 |{title}，
|     ^
8 | document.getElementById（'app'）
9 | )
10 |
在传输文件上（D:\work\swvreact\swvreact\node\u modules\babel-
loader\lib\index.js:65:13）

我尝试过移动文件，玩配置，玩.js和.jsx文件类型，我能想到的一切。发布的代码来自我能找到的最简单的教程，似乎是最新的

---

我的设置是一台运行Windows 10、Visual Studio代码、Chrome和Firefox以及Windows命令提示符的PC。所有应用程序都是最新的。我肯定我遗漏了一些小东西，但我肯定找不到它。

如果webpack找不到您的

。babelrc

，您会遇到此错误。确保文件名中没有输入错误。
您还可以尝试将babel配置放入

package.json

中，如下所示：

"babel": {
  "presets": [
    "env",
    "react",
    "stage-2"
  ]
},

test: /\.jsx?$/,
use: {
    loader: 'babel-loader',
    options: {
        presets: [
            'env',
            'react',
            'es2015',
            'stage-2',
        ]
    }
}

或者在

webpack.config.js

中添加如下选项：

"babel": {
  "presets": [
    "env",
    "react",
    "stage-2"
  ]
},

test: /\.jsx?$/,
use: {
    loader: 'babel-loader',
    options: {
        presets: [
            'env',
            'react',
            'es2015',
            'stage-2',
        ]
    }
}

---

顺便说一下，你不必使用

es2015

preset，因为你有preset。我觉得这很简单。谢谢