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

Question

Im tring to compile my react frontend app but I got a couple of error about "..." syntax:

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 extends (with OOP) another component so I need ...this.state to merge parent state with the local state.

When launcing it with npm start, it works perfectly but the compiler seems doesn't want that syntax.

UPDATED: This is my current webpack settings:

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;
 }

Lanching with this command:

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

Answer 1

You didn't tell about your configuration. But I assume babel and webpack. This seems to be an issue with your babel config. Try this plugin:

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

After you've installed it, add

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

To your .babelrc file and run the webpack again.

Answer 2

In a comment, you said that you don't have any babelrc. Then I already re-read the Webpack offical document and take this sample code from there for you:

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

after installing the babel-plugin-transform-object-rest-spread package, you could follow this sample code to update your webpack config. Read more about it: Webpack Loader

This is the combination that works for me, I'm using the babel-preset-stage-2 instead.

In the webpack.config.js:

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

I create a .babelrc file in the root folder and its content is:

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

And this is my package.json file:

{
  "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"
  }
}

Hopefully, it works for you.