【问题标题】：babel does not recognize jsx syntax... SyntaxError: Unexpected token (25:1) [duplicate]babel 无法识别 jsx 语法... SyntaxError: Unexpected token (25:1) [重复]
【发布时间】：2018-11-21 16:46:16
【问题描述】：

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

请告诉我您宝贵的cmets。

谢谢

[./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',]
    },
  },

【问题讨论】：

你在预设中没有反应
正如anttud所说：stackoverflow.com/a/33460642/1351277
@MihaiAlex 确实感谢您的回复。我安装了 yarn add babel-preset-react --dev 然后我将 webpack.config.js 更改为我在问题中编辑的那个，现在它的代码可以理解我预期的角度反应标签。
对于较新版本的 react，请使用新的 babel 模块：stackoverflow.com/a/53927497/6665568。它有更好的错误信息并支持 react 的新功能。

标签： javascript reactjs webpack babeljs

【解决方案1】：

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

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

【讨论】：

我将我的 webpack.config.js babel 加载器预设更改为这个。 { test: /\.js$/, exclude: /(node_modules)/, loader: 'babel-loader', options: { presets: ['react',] }, 也安装了yarn add babel-preset-react