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

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

Ashmah · Accepted Answer · 2019-09-27 17:57:04Z

2

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"]

edited Sep 27, 2019 at 17:57

answered Sep 27, 2019 at 17:24

Ashmah

8822 gold badges8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

vector Over a year ago

I don't see a '.babelrd' file in the root of the project

Ashmah Over a year ago

In that case I guess you need to create a .babelrc in root folder.

vector Over a year ago

... hm, i did that and now i'm getting: Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

Ashmah Over a year ago

Ok..But you said latest Babel. Then you need to follow the link you shared. I am updating the answer.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related