ReactJS - Unexpected Token with 3 comma

Question

I'm trying to compile my react frontend app but I got a couple of errors 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 launching it with npm start, it works perfectly but it seems the compiler 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;
     }

Launching 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.