Babel setup on ES7

Question

I have been upgrading my project to use ES7. I have changed some codes, made use of classes.

But there is a problem.

class Example {

   change = async (params) => {

       const job = await Some.job();
   }
}

Everytime I wanted to debug it gives me Unexpected token problem. Even if I run it with Babel, it fails. I know a project where people use this kind of syntax and it works. I could not a valid solution on the internet, a couple github issues but nothing solid, so asking here. What is the problem here? How should I setup the Babel or the project? Below the error from the console and my config file screenshots.

Possible duplicate of [Installing Babel V6.x ES7 Async/Await on Node.js v6.2.0 with Nodemon](https://stackoverflow.com/questions/38908736/installing-babel-v6-x-es7-async-await-on-node-js-v6-2-0-with-nodemon) — Michał Perłakowski, Jun 08 '17 at 12:57
Yes, I later solved the issue similarly to @MichałPerłakowski presented in the duplicate comment. **I needed to install stage-0 preset and transform plugins to make sure async operations are supported.** It is kind of not well documented, you make the setup but there are so much configurations on Babel.js. It basically gives you all of the options in an unordered way and hopes you to figure out how to setup your project. And this whole preset - plugin thing should be more explanatory. Thanks for the comments. — msharpp, Jun 08 '17 at 20:35
To expand a little more: You are using two features here that are not part of ES7: async functions and public class fields. Async functions will be part of this year's release (ES2017) and public class fields are still a proposal (stage 2 at this time). So you are already starting with the wrong question. If you just wanted support ES7, all you need is the ES2016 preset. If you want async functions you need the ES2017 preset. If you want public class fields you need the stage 2 preset. — Felix Kling, Jun 09 '17 at 16:08
Possible duplicate of [Transpile Async Await proposal with Babel.js?](https://stackoverflow.com/questions/28708975/transpile-async-await-proposal-with-babel-js) — Felix Kling, Jun 09 '17 at 16:30
Also a duplicate of [How to use ES6 arrow in class methods?](https://stackoverflow.com/q/31362292/218196) — Felix Kling, Jun 09 '17 at 16:30
@FelixKling Thank you for the information, this could be a possible duplicate but as I said, I couldnt understand babel at first, now I slowly realize what is what. Their documentation is not clear. — msharpp, Jun 10 '17 at 10:25

score 0 · Accepted Answer · answered Jun 08 '17 at 20:44

Just check out this link. Installing Babel V6.x ES7 Async/Await on Node.js v6.2.0 with Nodemon (You can also check this if you want to install plugin: https://babeljs.io/docs/plugins/transform-async-to-generator/ )

Alternatively search Google "babel async await support" and see the results.

Babel does not give you whole things supported out of the box, you have to make some configurations, installing presets/plugins etc.

In my situation I needed to install stage-0 preset and/or transform plugins to make sure async keywords are supported. In the link above it says stage-3 but you can install stage-0 also, it includes all the plugins up to stage-3.

Babel needs to be documented much better, there is no way you could just get to documentation and set things up. There is not a straight one way Getting started a Project setup that shows you things in an ordered way. Hope they woul add it.

Babel setup on ES7

1 Answers1