reactjs/laravel 'npm run development' fails with syntax error 'Unexpected Token' - reactjs

Question

I updated babel to the latest version and still get the error pointing to the "=" operator
35 | export const AssignmentsContainer = connectedContainer(
36 | class extends Component {
> 37 | buildAssignments = () => {
| ^
debug.log doesn't really offer any obvious hints
The package.json at this point looks like this:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.3.1",
"cross-env": "^5.1",
"jquery": "^3.4.1",
"laravel-mix": "^2.0",
"lodash": "^4.17.15",
"popper.js": "^1.12",
"react": "^16.9.0",
"react-dom": "^16.2.0"
},
"dependencies": {
"core-js": "^3.2.1",
"react-bootstrap": "^1.0.0-beta.12",
"react-html-parser": "^2.0.2",
"react-redux": "^7.1.1",
"redux": "^4.0.4"
}
}
Also tried sifting through this, but keep coming up empty: https://github.com/JeffreyWay/laravel-mix/issues/1402

Answer 1

Class properties are still not supported. So, you need to use #babel/plugin-proposal-class-properties which will help to transform class properties.
You need to install the babel plugin:
npm install --save-dev #babel/plugin-proposal-class-properties
And, in your .babelrc file, you need to make an entry:
"plugins": ["#babel/plugin-proposal-class-properties"]
This will solve your issue.
In the link you shared, it was mentioned to use "babel-plugin-transform-class-properties", but that's for older version of Babel. Since Babel v7 the name has been changed to "#babel/plugin-proposal-class-properties"
For Babel versions previous to 7:
Install the babel-plugin-transform-class-properties plugin:
npm install --save-dev babel-plugin-transform-class-properties
Then, make an entry in .babelrc:
"plugins": ["transform-class-properties"]