ReactJS - Unexpected Token with 3 comma - reactjs

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

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.

Answer 2

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.