Question

./client/index.js中的错误模块构建失败：SyntaxError：意外的令牌（31：4）

const Root =（）=＆gt; { 回来（

<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'
})

] };

我无法构建，它在代码中没有语法错误时抛出意外的令牌错误，它只是无法识别反应代码样式

我已经尝试在这个地方的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”文件，因此我在根目录下的app目录中创建了一个文件并将此内容放入该文件中

.babelrc

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

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

Answer 2

我看到两个可能的原因：

1）loaders: [ { test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" } ]将不执行任何操作，因为应在module.rules中指定加载器，因此没有任何处理jsx文件。这可以使用正则表达式/\.jsx?/

来处理js和jsx文件

2）babel加载器没有预设，所以除非在.babelrc ypou中没有指定它们，否则你需要将必要的预设添加到加载器

这些都应该通过......来补救。

npm install babel-preset-react babel-preset-es2015

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

Webpack构建失败，引发意外的令牌错误JSX语法

2 个答案: