Unexpected token ‘=’ in React Component [duplicate]

by

You need to use transform-class-properties plugin to use class fields, You can install it like 

npm install --save-dev babel-plugin-transform-class-properties

and use it as a plugin

{
    "presets": ["env", "react"],
    "plugins": ["transform-object-rest-spread", "transform-class-properties"]
}

transform-object-rest-spread is used for the rest spread syntax which is like

const {a, b, ...rest} = this.props

According to the documentation:

This presents two related proposals: "class instance fields" and
"class static fields".

"Class instance fields" describe properties intended to exist on
instances of a class (and may optionally include initializer
expressions for said properties).

"Class static fields" are declarative properties that exist on the
class object itself (and may optionally include initializer
expressions for said properties).

This proposal is currently at Stage 2.

You can also solve this by using preset stage-2 by installing 

npm install --save-dev babel-preset-stage-2

and using it like 

{
    "presets": ["env", "react", "stage-2"],
    "plugins": ["transform-object-rest-spread"]
}

More Related Contents:

  1. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  2. How to resolve “Cannot use import statement outside a module” in jest
  3. Differences between creating a new class to using export const
  4. Remove console.logs with Webpack & Uglify
  5. Requires Babel “7.0.0-0” but was loaded with “6.26.3”
  6. How to resolve “Cannot use import statement outside a module” from Jest when running tests?
  7. SyntaxError with Jest and React and importing CSS files
  8. import a module from node_modules with babel but failed
  9. Preset files are not allowed to export objects
  10. jest: Test suite failed to run, SyntaxError: Unexpected token import
  11. How to pass data from child component to its parent in ReactJS?
  12. What’s the difference between “super()” and “super(props)” in React when using es6 classes?
  13. What is the best way to access redux store outside a react component?
  14. Programmatically navigating in React-Router v4
  15. Dynamically Add Images React Webpack
  16. Can I dispatch an action in reducer?
  17. How do I access refs of a child component in the parent component
  18. React onClick and preventDefault() link refresh/redirect?
  19. Axios get in url works but with second parameter as object it doesn’t
  20. How to use Google fonts in React.js?
  21. Importing images in TypeScript React – “Cannot find module”
  22. How do I convert a string to jsx?
  23. Persistent navigation in a NextJs _app
  24. react app showing empty page when redirecting on production build
  25. Jest setup “SyntaxError: Unexpected token export”
  26. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  27. Only allow specific components as children in React and Typescript
  28. Failed to run jetifier React Native
  29. Passing props to Material UI styles
  30. How to handle login failed error in NextAuth.js?

Leave a Comment