javascript - Webpack 构建失败，抛出意外的 token 错误 JSX 语法

Question

./client/index.js 中的错误模块构建失败:语法错误:意外 token (31:4)

常量根 = () => { 返回 (

<ApolloProvider client={client}>
 ^
   <Router history={hashHistory}>

我的 Webpack 配置文件如下:

const path = require('path'),
webpack = require("webpack"),
clientPath = path.join(__dirname, 'client'),
HtmlWebpackPlugin = require('html-webpack-plugin');



module.exports = {
entry: path.join(clientPath, 'index.js'),
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
 rules: [
  {
    use: 'babel-loader',
    test: /\.js$/,
    exclude: /node_modules/
  },
  {
    use: ['style-loader', 'css-loader'],
    test: /\.css$/
  },
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
        'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
  },
  {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      loader: 'file-loader'
  }
],
loaders: [
  { test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
plugins: [
new HtmlWebpackPlugin({
  template: 'client/index.html'
})

]};

我无法构建，它抛出意外的 token 错误，而我的代码中没有语法错误，它只是无法识别 React 代码风格

我已经尝试在这个地方将 webpack 配置中的 js 更改为 jsx

{
use: 'babel-loader',
test: /\.jsx$/,
exclude: /node_modules/
}

然后它会抛出不同的错误

Module parse failed: /client/index.js Unexpected token (31:4)
You may need an appropriate loader to handle this file type.

Answer 1

这只是我的错误，“.babelrc”文件在我的目录中丢失，所以我在根级别的应用程序目录中创建了一个文件，并将此内容放入该文件

.babelrc

{
 "presets": ["env", "react"]
}

并尝试使用 npm run-script build....成功了!!!!