babel无法识别jsx语法... SyntaxError：意外的令牌（25：1）[重复]

Posted 2021-05-06

这个问题在这里已有答案：

• babel-loader jsx SyntaxError: Unexpected token [duplicate] 8个答案

我正在尝试使用webpack和babel构建我的反应项目，但我不明白为什么它会产生以下错误。我已经设置了.babelrc和webpack.config.js文件如下仍然不明白什么是错的，为什么它不能识别jsx。

请让我知道您宝贵的意见。

谢谢

[./src/index.js] 802 bytes {main} [built] [failed] [1 error]
    + 11 hidden modules

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (25:1)

  23 | 
  24 | ReactDOM.render(
> 25 |  <Provider store={store} >
     |  ^
  26 |      <App />
  27 |  </Provider>
  28 |   ,

 @ multi (webpack)-dev-server/client?http://localhost:4000 ./src/index.js
ℹ ｢wdm｣: Failed to compile.

.babelrc

{
  "presets": ["env", "stage-0"]
}

webpack.config.js

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: __dirname + "public/assets",
    filename: "bundle.js",
    publicPath: "assets"
  },
  devServer: {
    inline: true,
    contentBase: "./public",
    port: 4000
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
            presets: ['env','stage-0',]
        },
      },
      {
        test: /.json$/,
        exclude: /(node_modules)/,
        loader: 'json-loader'
      }
    ]
  }
}

Directory structure

├── graph_generator
│   ├── arrows_candlesticks_graph_set2_v1.py
│   ├── data.json
│   ├── graph_generator.py
│   ├── json_reader.py
│   └── test.py
├── package.json
├── public
│   ├── assets
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── README.md
├── src
│   ├── actions.js
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── components
│   │   ├── containers
│   │   │   ├── Graph.js
│   │   │   ├── MyPlot.js
│   │   │   └── Params.js
│   │   └── ui
│   │       ├── App.css
│   │       ├── Graph.js
│   │       ├── MyPlot.js
│   │       └── Params.js
│   ├── config.js
│   ├── constants.js
│   ├── data.json
│   ├── index.css
│   ├── index.js
│   ├── index.js.back
│   ├── initialState.js
│   ├── logo.svg
│   ├── registerServiceWorker.js
│   ├── store
│   │   ├── index.js
│   │   └── reducers.js
│   └── stylesheets
│       └── Params.js
├── webpack.config.js
├── yarn-error.log
└── yarn.lock

解

EDIT

安装后问题解决了

yarn add babel-preset-react --dev 

然后更改我的预设，如下所示：

rules: [
  {
    test: /.js$/,
    exclude: /(node_modules)/,
    loader: 'babel-loader',
    query: {
        presets: ['env','stage-0',]
    },
  },

答案

将此添加到webpack.config.js中的规则数组，并查看问题是否已解决：

        {
            test: /.jsx?/,
            include: APP_DIR,
            loader: 'babel-loader'
        }