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.
-
M2
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.
-
H0
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.
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.