Babel Plugin Class Properties – React Arrow Functions

Question

I am running a React project using npm. After hours of research and experimenting, everywhere says I have to add the following code to my ".babelrc" file, which I do not have in my directory and cannot create:

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

But this leads to the following error when I run the code:

ERROR in ./src/components/NavBar/Menu.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/ymoondhra/Desktop/yt-web/src/components/NavBar/Menu.js:
Support for the experimental syntax 'classProperties' isn't currently enabled
 (20:10):
  18 |     }
  19 | 
> 20 |     fast = () => {
     |          ^
  21 |         this.speed = 100;
  22 |     }
  23 | 
Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' 
section of your Babel config to enable transformation.

Y. Moondhra · Accepted Answer · 2018-12-24 19:23:26Z

9

Found the solution to my question after 3 hours: –create a file called "babel.config.js" in the root directory. –put this in the file. –rerun the program (i.e. npm start).

module.exports = {
  presets: [ "@babel/preset-env", "@babel/preset-react" ],
  plugins: [ "@babel/plugin-transform-arrow-functions", "@babel/plugin-proposal-    class-properties" ]
}

answered Dec 24, 2018 at 19:23

Y. Moondhra

1952 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Casanellas Over a year ago

does it need extra set up? i.e package.json

Bonomi Over a year ago

Took me ages to make it work. I was just changing the filename but was missing the modules.exports. Great post.

Arun Ramachandran Over a year ago

Does it overwrite .babelrc?

Collectives™ on Stack Overflow

Babel Plugin Class Properties – React Arrow Functions

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related