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    gt  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    amp  amp  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

User · Answer

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
};

User · Answer

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

User · Answer

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

User · Answer

yarn add --dev  babel plugin-proposal-class-properties  or  npm install  babel plugin-proposal-class-properties --save-dev   babelrc

User · Answer

Moving the state inside the constructor function worked for me       class MyComponent extends Component     constructor man        super man      this state                  Good Luck

User · Answer

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       quot presets quot            quot  babel preset-env quot          quot  babel preset-react quot          quot plugins quot                      quot  babel plugin-proposal-class-properties quot                  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

User · Answer

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

User · Answer

I just tested on Laravel Framework 5 7 19 and the following steps work   Make sure your  babelrc file is in the root folder of your application  and add the following code        plugins      babel plugin-proposal-class-properties       Run npm install --save-dev  babel plugin-proposal-class-properties   Run npm run watch

User · Answer

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

User · Answer

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    x000D   x000D       presets      babel preset-env     babel preset-react       plugins                   babel plugin-proposal-class-properties                    loose   true                     x000D   x000D   x000D    Add below code to the webpack config js file    x000D   x000D                test     jsx                 exclude   node modules               loader   babel-loader               query                    presets     babel preset-env     babel preset-react                              resolve                    extensions     js     jsx                   x000D   x000D   x000D    Close the terminal and run npm start again

User · Answer

Tried all the above solutions  but none of them worked  This issue comes when trying to add table to a class  npm i react-native-table-component and then run App js    node modules react-native-table-component components cell js SyntaxError  C  Users Dileep finaltest node modules react-native-table-component components cell js  Support for the experimental syntax  classProperties  isn t currently enabled  5 20   Add  babel plugin-proposal-class-properties  https   git io vb4SL  to the  plugins  section of your Babel config to enable transformation

User · Answer

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

User · Answer

Adding    plugins                   babel plugin-proposal-class-properties              into  babelrc works for me

User · Answer

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

User · Answer

I m using yarn  I had to do the following to overcome the error   yarn add  babel plugin-proposal-class-properties --dev

User · Answer

Change   plugins           babel plugin-proposal-class-properties        To   plugins                   babel plugin-proposal-class-properties                    loose   true                     This worked for me

User · Answer

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   quot public quot   quot dist quot   javascript        filename   bundle js         module        rules                    test      jsx js             exclude   node modules           use               loader   babel-loader             options                presets                     babel preset-env                      quot targets quot    quot defaults quot                                    babel preset-react                             plugins                   quot  babel plugin-proposal-class-properties quot

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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      quot presets quot                  quot  babel preset-react quot            quot targets quot      quot browsers quot     quot last 3 versions quot    quot safari  gt   6 quot                     quot plugins quot      quot  babel plugin-proposal-class-properties quot

[reactjs] Support for the experimental syntax 'classProperties' isn't currently enabled

Examples related to reactjs

Examples related to webpack

Examples related to babeljs