ReactJS-带有3个逗号的意外令牌

Question

我想编译我的React前端应用程序，但是遇到一些关于“ ...”语法的错误：

ERROR in condition.jsx
Module build failed: SyntaxError: Unexpected token (25:10)

  23 |           show_table : undefined,
  24 |           fa_count : 0,
> 25 |           ...this.state
     |           ^
  26 |         }

condition.jsx扩展了（带有OOP）另一个组件，因此我需要.... state将父状态与本地状态合并。

当使用npm start启动它时，它可以完美工作，但是编译器似乎不需要该语法。

更新：这是我当前的Webpack设置：

const webpack = require('webpack');
const path = require('path');
const Uglify = require("uglifyjs-webpack-plugin");

var plugins = [];

plugins.push(new Uglify());

var config = {
context: __dirname + '/src',
entry: {
    javascript: "./index.js",    
},

plugins: plugins,

output: {
  path: path.join(__dirname,'../static/js/'),
  filename: 'bundle.js',
},

devServer: {
  inline: true,
  port: 8080
},
 resolveLoader: {
    modules: [path.join(__dirname, 'node_modules')]
 },
 module: {
  loaders: [    
     {
        test:/\.(js|jsx)?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
           presets: ['env','react']
        }
     },
     {
        test: /\.css$/,
        loader: 'style-loader'
      }, 
      {
        test: /\.css$/,
        loader: 'css-loader',
        query: {
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
     {
        test: /\.svg$/,
        use: [
          {
            loader: "babel-loader"
          },
          {
            loader: "react-svg-loader",
            options: {
              jsx: true // true outputs JSX tags
            }
          }
        ]
      }
    ]
   },
  }

 module.exports = env => {   
   return  config;
 }

使用以下命令启动：

./node_modules/.bin/webpack --config webpack.config.js

Answer 1

您没有透露您的配置。 但是我假设babel和webpack。 这似乎与您的babel配置有关。 试试这个插件：

https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread

安装后，添加

"plugins": ["transform-object-rest-spread"]

到您的.babelrc文件，然后再次运行webpack。

Answer 2

在一条评论中，您说您没有任何babelrc。 然后，我已经重新阅读了Webpack官方文档，并从那里获取了以下示例代码：

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: [require('@babel/plugin-proposal-object-rest-spread')]
        }
      }
    }
  ]

安装babel-plugin-transform-object-rest-spread软件包后，您可以按照以下示例代码来更新Webpack配置。 了解更多信息： Webpack Loader

这是对我有用的组合，我改用babel-preset-stage-2 。

在webpack.config.js中：

 ....
 module: {
    rules: [
      {
        test:/\.(js|jsx)?$/,
        use: ['babel-loader']
      },
      ....
    ]
  }
....

我在根文件夹中创建一个.babelrc文件，其内容为：

{
  "presets": ["env", "react", "stage-2"],
  ....
}

这是我的package.json文件：

{
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.0",
    "react-hot-loader": "^4.3.3",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.15.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "uuid": "^3.3.2"
  }
}

希望它对您有用。