React error support for the experimental syntax 'classproperties' isn't currently enabled

Dung Do Tien Mar 23 2021 456

I created a project with ReactJs. After installing Babel I got an error as below:

ModuleBuildError in Module build failed (from ./node_modules/babel-loader/lib/index.js): 
SyntaxError: C:\DungDTTest\Project\ReactExample\assets\js\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (17:9)

This is my package.json

{
  "name": "cebula_react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "react-hot-loader": "^4.3.6",
    "webpack": "^4.17.2",
    "webpack-bundle-tracker": "^0.3.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
    "react": "^16.5.0",
    "react-dom": "^16.5.0"
  }
}

babelrc config

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

How can I fix it?

Have 2 answer(s) found.
  • M

    MSIIIXI Mar 23 2021

    You can change :

    "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]

    To

    "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]

    I hope it resolves this issue for you.

  • H

    Huỳnh Ngọc Thiện Mar 23 2021

    You can change .babelrc file with config as below:

    {
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties"
        ]
    ]
}

    This config worked for me.

Related Q&A May You Like

  1. TypeError: get(...)._f.ref.focus is not a function in ReactJs
  2. ReactJS: Invalid DOM property `stroke-Width`.
  3. Invariant failed: You should not use <Route> outside a <Router> in Reactjs
  4. ReactJS ReferenceError: regeneratorRuntime is not defined
  5. Could not find react-redux context value; please ensure the component is wrapped in a <Provider> in Reactjs
  6. Uncaught TypeError: Cannot read property 'createElement' of undefined in ReactJs
  7. TypeError: Cannot read property 'setState' of undefined in ReactJs
  8. Module not found: Can't resolve 'react-dom' in ReactJs
  9. Module not found: Can't resolve 'axios' in ReactJs
  10. Error module not found: Can't resolve 'react' in ReactJs
  11. Error module not found: Can't resolve 'jquery' in react
  12. React: 'create-react-app' is not recognized as an internal or external command
  13. 'react-scripts' is not recognized as an internal or external command in React
  14. React Error: input is a void element tag and must neither have 'children' nor use 'dangerouslySetInnerHTML'
  15. 'React' must be in scope when using JSX react/react-in-jsx-scope
Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Most Quizs Popular

Start Test

Javascript - Functions
Start Test

Asp.Net Core - Exam test 01
Start Test

Asp.Net Core - Exam test 02
Start Test

C# - Level Beginner

Popular Tips

This site uses cookies so that we can remember you and understand how you interact with our website. This allows us to improve and customize your browsing experience. See our Cookies Policy.
X Close