时间戳

首页 > 解决方案 > babel 无法识别 jsx 语法... SyntaxError: Unexpected token (25:1)

javascript - babel 无法识别 jsx 语法... SyntaxError: Unexpected token (25:1)

问题描述

我正在尝试使用 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'
      }
    ]
  }
}

目录结构

├── 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

解决方案

编辑

安装后问题解决

yarn add babel-preset-react --dev

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

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

标签： javascriptreactjswebpackbabeljs

解决方案

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

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

推荐阅读