babel-loader jsx SyntaxError: Unexpected token [重复]

添加“babel-preset-react”

npm install babel-preset-react

并在 webpack.config.js 中为 babel-loader 添加“预设”选项

（或者您可以将其添加到您的 .babelrc 或 package.js：http://babeljs.io/docs/usage/babelrc/）

这是一个示例 webpack.config.js：

{ 
    test: /\.jsx?$/,         // Match both .js and .jsx files
    exclude: /node_modules/, 
    loader: "babel", 
    query:
      {
        presets:['react']
      }
}

最近 Babel 6 发布了，有一个重大变化：https://babeljs.io/blog/2015/10/29/6.0.0

如果您使用的是 react 0.14，则应使用 ReactDOM.render()（来自 require('react-dom')）而不是 React.render()：https://facebook.github.io/react/blog/#changelog

2018 年更新

Rule.query 已被弃用，取而代之的是 Rule.options。 webpack 4 中的用法如下：

npm install babel-loader babel-preset-react

然后在你的 webpack 配置中（作为 module.exports 对象中 module.rules 数组中的一个条目）

{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: ['react']
        }
      }
    ],
  }

---

从 babel 5 迁移到 babel 6 时，我遇到了类似的问题。

我只是在运行 babel 将 src 编译到 lib 文件夹 babel src --out-dir lib

我将分享我对 babel 6 的设置：

确保您安装了以下 babel 6 devDependencies

"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0"

将你的 .babelrc 文件添加到项目中：

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

---

由于上面的答案仍然使 some people 处于黑暗中，因此完整的 webpack.config.js 可能如下所示：

var path = require('path'); var config = { entry: path.resolve(__dirname, 'app/main.js'), output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js' }, module: { loaders : [{ test: /\.jsx?$/, loader: 'babel', query: { presets:['es2015', 'react'] } }] }, }; module.exports = 配置；

---

对我来说，解决方案是使用以下内容创建文件 .babelrc：

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

---

以下方式帮助了我（包括 react-hot、babel loader 和 es2015、react presets）：

loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel?presets[]=es2015&presets[]=react']
      }
]

---

对于那些仍然可能面临添加 jsx 来测试的问题的人，为我修复了它

test: /\.jsx?$/,

---

这对我来说很完美

{
    test: /\.(js|jsx)$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015','react']
    }
},

---

您可以在此处找到 Henrik Joreteg (ampersandjs) 制作的非常好的样板：https://github.com/HenrikJoreteg/hjs-webpack

然后在您的 webpack.config.js

var getConfig = require('hjs-webpack')

module.exports = getConfig({
  in: 'src/index.js',
  out: 'public',
  clearBeforeBuild: true,
  https: process.argv.indexOf('--https') !== -1
})

---