Support for the experimental syntax 'classProperties' isn't currently enabled

Question

While I was setting up React within Django project I came across this error

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

  15 | 
  16 | class BodyPartWrapper extends Component {
> 17 |   state = {
     |         ^
  18 | 
  19 |   }
  20 | 

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 
'plugins' section of your Babel config to enable transformation.

So, I installed @babel/plugin-proposal-class-properties and put this in babelrc

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

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

However the error is still existed, What is the problem??

You shouldn't have/need both `@babel/plugin-proposal-class-properties` and `babel-plugin-transform-class-properties`. You're rebuilding after install, yes? — SamVK, Sep 08 '18 at 18:04

score 114 · Answer 1 · edited Sep 16 '18 at 07:48

114

Change

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

To

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

This worked for me

edited Sep 16 '18 at 07:48

Thomas

1,445
14
30

answered Sep 16 '18 at 05:22

Ashik Meerankutty

1,289
1
9
11

29

npm i --save-dev @babel/plugin-proposal-class-properties – Abhay Shiro Sep 29 '18 at 13:56
4

This dd'nt work for me. I am not ejecting the react app – Supriya Kalghatgi Mar 12 '19 at 11:44
5

Ubuntu 18 - I had to rename `.babelrc` to `babel.config.js` and use `module.export` like https://stackoverflow.com/questions/53916434/babel-plugin-class-properties-react-arrow-functions as discussed on github https://github.com/babel/babel/issues/7879#issuecomment-419732313 – Fabrizio Bertoglio Mar 16 '19 at 11:16
2

`Test suite failed to run; .loose is not a valid Plugin property` – David Callanan Jul 05 '19 at 08:47
1

@DavidCallanan to solve that, just remove the second arg (`{"loose": true}`} – kugo2006 Oct 05 '20 at 06:59
Seems not to work anymore: `Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.` – feeela Mar 16 '23 at 07:28

Raz Buchnik · Answer 2 · 2020-11-02T09:48:20.323

90

First install the: @babel/plugin-proposal-class-properties as dev dependency:

npm install @babel/plugin-proposal-class-properties --save-dev

Then edit your .babelrc so it will be exact like this:

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

.babelrc file located in the root directory, where package.json is.

Note that you should re-start your webpack dev server to changes take affect.

edited Nov 02 '20 at 09:48

answered Mar 07 '19 at 14:44

Raz Buchnik

7,753
14
53
96

4

this one works for me, thanks. I think is the solution for babel 7.0+ – Black Hole May 31 '19 at 03:15
Doesn't work for me in the IDE, with React 18. The React app does work, but there's an ugly error every time the file is scanned in the IDE. – Juha Untinen Feb 06 '21 at 10:34
React 17, that is. – Juha Untinen May 09 '21 at 08:04
I am new to the react dev. How I can re-start webpack dev server? I run npm start but this solution does not work for me? – Elham Bagheri Jun 22 '22 at 12:51

score 73 · Answer 3 · edited Jun 20 '20 at 09:12

73

Solution for webpack project

I just solve this problem by adding @babel/plugin-proposal-class-properties into webpack config plugin. The module section of my webpack.config.js looks like this

module: {
    rules: [
        {
            test: path.join(__dirname, '.'),
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env',
                          '@babel/react',{
                          'plugins': ['@babel/plugin-proposal-class-properties']}]
            }
        }
    ]
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 07 '18 at 21:18

Fangming

24,551
6
100
90

3

This should be the proper answer when you use webpack, as it is not good to have many configuration files (like webpack.config.js, package.json, and .babelrc) - https://github.com/babel/babel/issues/8655#issuecomment-419795548 – Miro J. May 02 '19 at 16:38
worked for me perfectly - was mystified on this for days...thanks much. – samuelsaumanchan Aug 16 '20 at 16:13
Which one is that `webpack.config.js`? I get 3 currently. – Burak Kaymakci Apr 20 '21 at 14:50
@BurakKaymakci You should have only one webpack.config.js in react root folder – BetoLima1 Jun 01 '22 at 19:32

score 48 · Answer 4 · answered Sep 25 '18 at 18:07

48

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

replace your .babelrc file with above code. it fixed the issue for me.

answered Sep 25 '18 at 18:07

Awn Ali

1,361
1
17
31

If you have ejected create-react-app, change any config in webpack.config.demo and package.json with this config. This means running `npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties` – hodgef Nov 17 '18 at 02:09
This was straight-forward. It so happened that I was missing the `@babel/plugin-proposal-class-properties` dependency. – khwilo Jul 24 '19 at 13:29
it worked, but make sure to install @babel/plugin-proposal-class-properties first – Minh Kha Sep 25 '20 at 04:16

score 19 · Answer 5 · answered Apr 07 '20 at 09:35

In my work environment root, .babelrc file was not there. However, following entry in package.json solved the issue.

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

Note: Don't forget to exit the console and reopen before executing the npm or yarn commands.

score 8 · Answer 6 · answered Mar 02 '21 at 03:19

There are two ways to work with react state:

Option 1: Just add to package.json:

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

Option 2:

1. Creta a file called .babelrc in the root folder.

Write in .babelrc:

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

Run:

npm i @babel/plugin-proposal-class-properties

3. Run:

npm run dev
or
npm run watch

score 7 · Answer 7 · answered Oct 10 '18 at 01:35

After almost 3 hours of searching and spending time on the same error, I found that I'm using name import for React:

import { React } from 'react';

which is totally wrong. Just by switching it to:

import React from 'react';

all the error are gone. I hope this helps someone. This is my .babelrc:

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

the webpack.config.js

const path = require('path');
const devMode = process.env.Node_ENV !== 'production';
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  entry: './src/App.js',
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'App.js'
  },
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    port:9090,
    open: 'google chrome',
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },{
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[local]--[hash:base64:5]',
              sourceMap: true
            }
          },{
            loader: 'sass-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
    })
  ]
}

the package.json

{
  "name": "expense-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.0",
    "mini-css-extract-plugin": "^0.4.3",
    "node-sass": "^4.9.3",
    "react-router-dom": "^4.3.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  },
  "dependencies": {
    "normalize.css": "^8.0.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2"
  }
}

This answer looks irrelevant to me. A wrong import is a wrong import, regardless of the plugins you're using. — Marco Faustinelli, Nov 07 '18 at 10:07
thanks for your feedback @MarcoFaustinelli . A wrong import is one of the reasons of this error. So simple and fundamental problem but can happen to everyone. An answer is guide to a problem. — Mo Hemati, Nov 09 '18 at 02:02
Upvoted not because it worked for me, but because it helped me understand what the problem was - this error message is not very specific. — Pro Q, Feb 01 '19 at 01:20

Aakash · Answer 8 · 2020-01-06T09:02:48.583

7

Moving the state inside the constructor function worked for me:

...
class MyComponent extends Component {
  constructor(man) {
    super(man)
    this.state = {}
  }
}
...

Good Luck...

edited Jan 06 '20 at 09:02

answered Nov 06 '19 at 08:45

Aakash

21,375
7
100
81

score 6 · Answer 9 · answered Oct 18 '18 at 16:56

6

Install the plugin-proposal-class-properties npm install @babel/plugin-proposal-class-properties --save-dev
Update your webpack.config.js by adding 'plugins': ['@babel/plugin-proposal-class-properties']}]

answered Oct 18 '18 at 16:56

iTech

81
4

For more information about how to add in the 'plugins', see [this page](https://webpack.js.org/concepts/plugins/) – Pro Q Feb 01 '19 at 01:29
Doing this is giving me an error along the lines of `Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.plugins[1] should be one of these: object { apply, … } | function -> Plugin of type object or instanceof Function Details: * configuration.plugins[1] should be an object. -> Plugin instance * configuration.plugins[1] should be an instance of function -> Function acting as plugin` – Pro Q Feb 01 '19 at 02:21

score 6 · Answer 10 · edited Mar 22 '19 at 09:09

6

I find the problem that my .babelrc was ignored, However I create babel.config.js and add the following:

module.exports = {
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-transform-regenerator',
    [
      '@babel/plugin-transform-runtime',
      {
        helpers: false,
        regenerator: true,
      },
    ],
  ],
  presets: [
    "@babel/preset-flow",
    'module:metro-react-native-babel-preset',
  ],
};

And it works for me on React Native application, I think this also would help React apps as well.

edited Mar 22 '19 at 09:09

Fabrizio Bertoglio

5,890
4
16
57

answered Jan 14 '19 at 12:07

Hussam Kurd

8,066
2
43
38

1

`module.exports = { "presets": ["module:metro-react-native-babel-preset"], "plugins": ["@babel/plugin-proposal-class-properties"] }` was enough for me. Can you update your answer and also we should understand why `.babelrc` was ignored – Fabrizio Bertoglio Mar 22 '19 at 09:10
1

@FabrizioBertoglio Babel 7 no longer automatically loads .babelrc. New to Babel in 7, is the concept of a "root" directory. For project-wideconfiguration, Babel will automatically search for a "babel.config.js" – Hussam Kurd Mar 22 '19 at 12:02
1

thanks .. https://babeljs.io/docs/en/config-files/#6x-vs-7x-babelrc-loading – Fabrizio Bertoglio Mar 22 '19 at 12:49

score 5 · Answer 11 · answered Nov 29 '19 at 13:27

According to this GitHub issue if you using create-react-app you should copy your .babelrc or babel.config.js configurations to webpack.config.js and delete those.because of htis two line of code babelrc: false,configFile: false, your config in babelrc,.. are useless. and your webpack.config.js is in your ./node_madules/react-scripts/config folder I solved my problem like this:

{
              test: /\.(js|mjs)$/,
              exclude: /@babel(?:\/|\\{1,2})runtime/,
              loader: require.resolve('babel-loader'),
              options: {
                babelrc: false,
                configFile: false,
                compact: false,
                presets: [
                  [
                    require.resolve('babel-preset-react-app/dependencies'),
                    { helpers: true },

                  ],
                  '@babel/preset-env', '@babel/preset-react'
                ],
                plugins: ['@babel/plugin-proposal-class-properties'],
                .
                .
                .

Did you edit the webpack config in react scripts? That will just cause it to be overwritten in the next npm i? Then should eject. — Tosh, Feb 19 '21 at 12:37
I just did whatever on the GitHub page mention. at that time solved my problem. — Z-Soroush, Mar 11 '21 at 17:18

score 4 · Answer 12 · answered May 13 '19 at 17:38

4

I am using the babel parser explicitly. None of the above solutions worked for me. This worked.

const ast = parser.parse(inputCode, {
      sourceType: 'module',
      plugins: [
        'jsx',
        'classProperties', // '@babel/plugin-proposal-class-properties',
      ],
    });

answered May 13 '19 at 17:38

Souradeep Nanda

3,116
2
30
44

where should i add this code ? and you use react js ? – MoHammaD ReZa DehGhani Jun 09 '19 at 06:44
1

This code is if you are developing a babel plugin. And yes, my plugin is for JSX. https://github.com/Ghost---Shadow/i18nize-react – Souradeep Nanda Jun 09 '19 at 07:57

score 3 · Answer 13 · answered Jan 21 '19 at 16:39

3

I'm using yarn. I had to do the following to overcome the error.

yarn add @babel/plugin-proposal-class-properties --dev

answered Jan 21 '19 at 16:39

Sylvester

421
3
6

score 3 · Answer 14 · edited Nov 28 '19 at 10:41

3

Adding

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

into .babelrc works for me.

edited Nov 28 '19 at 10:41

Angel F Syrus

1,984
8
23
43

answered Nov 28 '19 at 08:57

chintan bhut

45
1
8

score 3 · Answer 15 · edited Jun 09 '20 at 12:52

3

yarn add --dev @babel/plugin-proposal-class-properties

or

npm install @babel/plugin-proposal-class-properties --save-dev .babelrc

edited Jun 09 '20 at 12:52

dippas

58,591
15
114
126

answered Jun 05 '20 at 00:24

AN German

725
10
10

score 3 · Answer 16 · answered Nov 05 '20 at 11:44

For ejected create-react-app projects

I just solved my case adding the following lines to my webpack.config.js:

  presets: [
    [
      require.resolve('babel-preset-react-app/dependencies'),
      { helpers: true },
    ],
    /* INSERT START */
    require.resolve('@babel/preset-env'),
    require.resolve('@babel/preset-react'),
      {
      'plugins': ['@babel/plugin-proposal-class-properties']
    } 
    /* INSERTED END */
  ],

score 1 · Answer 17 · answered Nov 24 '19 at 09:57

If some one working on monorepo following react-native-web-monorepo than you need to config-overrides.js file in packages/web. you need to add resolveApp('../../node_modules/react-native-ratings'), in that file...

My complete config-override.js file is

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

// our packages that will now be included in the CRA build step
const appIncludes = [
    resolveApp('src'),
    resolveApp('../components/src'),
    resolveApp('../../node_modules/@react-navigation'),
    resolveApp('../../node_modules/react-navigation'),
    resolveApp('../../node_modules/react-native-gesture-handler'),
    resolveApp('../../node_modules/react-native-reanimated'),
    resolveApp('../../node_modules/react-native-screens'),
    resolveApp('../../node_modules/react-native-ratings'),
    resolveApp('../../node_modules/react-navigation-drawer'),
    resolveApp('../../node_modules/react-navigation-stack'),
    resolveApp('../../node_modules/react-navigation-tabs'),
    resolveApp('../../node_modules/react-native-elements'),
    resolveApp('../../node_modules/react-native-vector-icons'),
];

module.exports = function override(config, env) {
    // allow importing from outside of src folder
    config.resolve.plugins = config.resolve.plugins.filter(
        plugin => plugin.constructor.name !== 'ModuleScopePlugin'
    );
    config.module.rules[0].include = appIncludes;
    config.module.rules[1] = null;
    config.module.rules[2].oneOf[1].include = appIncludes;
    config.module.rules[2].oneOf[1].options.plugins = [
        require.resolve('babel-plugin-react-native-web'),
        require.resolve('@babel/plugin-proposal-class-properties'),
    ].concat(config.module.rules[2].oneOf[1].options.plugins);
    config.module.rules = config.module.rules.filter(Boolean);
    config.plugins.push(
        new webpack.DefinePlugin({ __DEV__: env !== 'production' })
    );

    return config
};

score 1 · Answer 18 · answered Jul 14 '20 at 14:01

I faced the same issue while trying to transpile some jsx with babel. Below is the solution that worked for me. You can add the following json to your .babelrc

{
  "presets": [
    [
      "@babel/preset-react",
      { "targets": { "browsers": ["last 3 versions", "safari >= 6"] } }
    ]
  ],
  "plugins": [["@babel/plugin-proposal-class-properties"]]
}

score 1 · Answer 19 · answered Aug 27 '20 at 14:02

For the react projects with webpack:

Do: npm install @babel/plugin-proposal-class-properties --save-dev
Create .babelrc (if not present) file in the root folder where package.json and webpack.config.js are present and add below code to that:

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

Add below code to the webpack.config.js file:

{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ["@babel/preset-env", "@babel/preset-react"]
            },
            resolve: {
                extensions: ['.js', '.jsx']
            }
}

Close the terminal and run npm start again.

score 1 · Answer 20 · answered Feb 21 '21 at 10:40

you must install

npm install @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react babel-loader

and

change entry and output

const path = require('path')        
module.exports = {
  entry: path.resolve(__dirname,'src', 'app.js'),
  output: {
    path: path.resolve(__dirname, "public","dist",'javascript'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                "targets": "defaults"
              }],
              '@babel/preset-react'
            ],
            plugins: [
              "@babel/plugin-proposal-class-properties"
            ]
          }
        }]
      }
    ]
  }
}

score 0 · Answer 21 · answered May 21 '20 at 04:04

0

I created a symlink for src/components -> ../../components that caused npm start to go nuts and stop interpreting src/components/*.js as jsx, thus giving that same error. All instructions to fix it from official babel were useless. When I copied back the components directory everything was BACK TO NORMAL!

answered May 21 '20 at 04:04

martin

862
9
28

1

did you find any solution to this ? i have a application with dependencies installed in normal fashion and i am able to test it, But when i use the lib from yarn link, it was throwing above error – mdsadiq Oct 03 '20 at 18:57
1

@mdsadiq sorry, no, haven't tested the latest ver and the ticket is still open here: https://github.com/facebook/create-react-app/issues/9040 maybe you can upvote, thanks. – martin Oct 06 '20 at 00:17
A workaround to allow react-scripts to work with symlinks: https://github.com/facebook/create-react-app/pull/7993/files – CefBoud Jan 03 '22 at 09:40

score 0 · Answer 22 · answered May 15 '21 at 06:43

0

Ensure you have not mistakenly imported import BrowserRouter from "react-router-dom/modules/BrowserRouter"; instead of import {BrowserRouter} from "react-router-dom";

answered May 15 '21 at 06:43

Dhananjay Badaya

43
3

score 0 · Answer 23 · answered Jan 03 '22 at 09:45

0

If this happens after typescript update, just add useDefineForClassFields: false to tsconfig file.

See: https://www.typescriptlang.org/tsconfig#useDefineForClassFields

answered Jan 03 '22 at 09:45

SAM

742
10
24

Support for the experimental syntax 'classProperties' isn't currently enabled

23 Answers23

Solution for webpack project

Linked