Question

当我尝试使用webpack编译我的反应jsx代码时，我收到以下错误：

ERROR in ./client/index.js
Module parse failed: C:\Users\Gum-Joe\Documents\Projects\bedel/client\index.js Unexpected token (6:11)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:11)
    at Parser.pp.raise (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:920:13)
    at Parser.pp.unexpected (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1483:8)
    at Parser.pp.parseExprAtom (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:330:12)
    at Parser.pp.parseExprSubscripts (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:225:19)
    at Parser.pp.parseMaybeUnary (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:204:17)
    at Parser.pp.parseExprOps (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:151:19)
    at Parser.pp.parseMaybeConditional (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:133:19)
    at Parser.pp.parseMaybeAssign (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:110:19)
    at Parser.pp.parseExpression (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:86:19)
    at Parser.pp.parseReturnStatement (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1854:26)
    at Parser.pp.parseStatement (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1719:19)
    at Parser.pp.parseBlock (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1991:21)
    at Parser.pp.parseFunctionBody (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:607:22)
    at Parser.pp.parseMethod (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:576:8)
    at Parser.pp.parseClassMethod (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:2137:23)
    at Parser.pp.parseClass (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:2122:10)
 @ ./client/index.js 1:0-20

.babelrc：

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

webpack.config.js：

// Webpack config
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {

  // Use client as our root
  context: __dirname + "/client",
  // Entry file
  entry: "./index.js",
  // Resolve
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  // Output to /build
  output: {
        path: path.join(__dirname, "build", "js"),
        filename: "bundle.js"
    },
  loaders: [
    { test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
  ],
  // Plugins
  plugins: [
    // HTML
    new HtmlWebpackPlugin({
      title: 'Bedel',
      filename: path.join(__dirname, 'views', 'index.ejs'),
      template: path.join(__dirname, 'client', 'templates', 'index.ejs')
    })
  ]
};

index.js：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React</p>;
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

我已经安装了所有必需的babel预设，以及babel-core。我已经看过以下答案了：

编辑：在评论我的jsx语法后，输出bundle.js似乎没有被babel转换（即我可以在其中看到ES6代码）

修改：由于给您带来的不便，很抱歉，app.jsx是我尝试的解决方案，其中包括将index.js中的逻辑放入单独的文件中。

修改：以下是我尝试过的无法解决的解决方案列表：

将.babelrc复制到client/.babelrc
更改测试以测试.js而不是.js
将应用逻辑分离到单独的文件（app.js）
将预设用于webpack config

另外，我已将代码推送到我的GitHub仓库（https://github.com/Gum-Joe/bedel）。随意看看它。

Answer 1

您将加载程序配置为仅通过Babel传递.jsx个文件：

test: /\.jsx$/

但是，您的文件的扩展名为.js。重命名文件或将测试表达式更新为/\.jsx?$/。

除了更新test之外，您还需要将.babel.rc重命名为.babelrc（.之前无rc）。否则，Babel认为没有配置文件，也不会加载任何预设。

Answer 2

loaders属性必须存在于module属性中。 Webpack Loaders

module.exports = {
  // ...

  // Output to /build
  output: {
    path: path.join(__dirname, "build", "js"),
    filename: "bundle.js"
  },

  module: {
    loaders: [
      { test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  },

  //...
};

Answer 3

你需要在babel上使用react-preset，例如：

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

Answer 4

我也有这个问题，如果你使用的是Windows和Node 6.x，我现在发现的唯一解决方法似乎是使用Node 4 LTS或5。在不知道根本原因的情况下，问题似乎源于使用JSX，Webpack，Babel，Acorn JS，Node 6和Windows的某些组合。

https://github.com/coryhouse/pluralsight-redux-starter/issues/2 https://github.com/danmartinez101/babel-preset-react-hmre/issues/32

Answer 5

您可以尝试将整个

元素括在括号“（）”中吗？

return (<p>...</p>)

Webpack会为JSX抛出语法错误

5 个答案: