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

Dung Do Tien Mar 23 2021 443

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.

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.

Popular Tips

X Close