Installing Babel V6.x ES7 Async/Await on Node.js v6.2.0 with Nodemon

Question

Man is this a pain to setup! I've followed the installation instructions here clicking on the nodemon box:

https://babeljs.io/docs/setup/#installation

npm install babel-cli babel-preset-es2015 --save-dev

.babelrc in root directory:

{
  "presets": ["es2015"],
  "plugins": ["transform-async-to-generator"]
}

package.json (I've installed more babel stuff as seen):

...
"devDependencies": {
  "babel-cli": "^6.11.4",
  "babel-core": "^6.13.2",
  "babel-plugin-transform-async-to-generator": "^6.8.0",
  "babel-polyfill": "^6.13.0",
  "babel-preset-es2015": "^6.13.2",
  "babel-preset-node6": "^11.0.0",
  "babel-register": "^6.11.6"
},
"scripts": {
  "startn": "nodemon app.js",
  "babel-node": "babel-node --presets=es2015 --ignore='foo|bar|baz'",
  "babel-dev": "nodemon --exec npm run babel-node -- experiment/socketio/test.js"
},
...

test.js:

(async function () { // <-- error occues here
    const value = await 123;
    console.log(value);
})().then(() => {
    console.log('Done');
});

I run the command run-script babel-dev as seen below. Error:

karl@karl-ux303ln:~/dev/sketch$ npm run-script babel-dev

> [email protected] babel-dev /home/karl/dev/sketch
> nodemon --exec npm run babel-node -- experiment/socketio/test.js

[nodemon] 1.10.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `npm run babel-node experiment/socketio/test.js`

> [email protected] babel-node /home/karl/dev/sketch
> babel-node --presets=es2015 --ignore='foo|bar|baz' "experiment/socketio/test.js"

/home/karl/dev/sketch/node_modules/babel-core/lib/transformation/file/index.js:591
      throw err;
      ^

SyntaxError: /home/karl/dev/sketch/experiment/socketio/test.js: Unexpected token (1:7)
> 1 | (async function () {
    |        ^
  2 |     const value = await 123;
  3 |     console.log(value);
  4 | })().then(() => {
    at Parser.pp.raise (/home/karl/dev/sketch/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/home/karl/dev/sketch/node_modules/babylon/lib/parser/util.js:89:8)
    at Parser.pp.expect (/home/karl/dev/sketch/node_modules/babylon/lib/parser/util.js:83:33)
    at Parser.pp.parseParenAndDistinguishExpression (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:582:12)
    at Parser.pp.parseExprAtom (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:481:19)
    at Parser.pp.parseExprSubscripts (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:277:19)
    at Parser.pp.parseMaybeUnary (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:257:19)
    at Parser.pp.parseExprOps (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:188:19)
    at Parser.pp.parseMaybeConditional (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:165:19)
    at Parser.pp.parseMaybeAssign (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:128:19)

npm ERR! Linux 3.19.0-65-generic
npm ERR! argv "/home/karl/.nvm/versions/node/v6.2.0/bin/node" "/home/karl/.nvm/versions/node/v6.2.0/bin/npm" "run" "babel-node" "experiment/socketio/test.js"
npm ERR! node v6.2.0
npm ERR! npm  v3.8.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] babel-node: `babel-node --presets=es2015 --ignore='foo|bar|baz' "experiment/socketio/test.js"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] babel-node script 'babel-node --presets=es2015 --ignore='foo|bar|baz' "experiment/socketio/test.js"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the sketch package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     babel-node --presets=es2015 --ignore='foo|bar|baz' "experiment/socketio/test.js"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs sketch
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls sketch
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/karl/dev/sketch/npm-debug.log
[nodemon] app crashed - waiting for file changes before starting...

I've also tried switching to node v4.4.7 and upgrading npm to 3.10.6. still same error.

Answer 1

1) remove all babel modules (remove everything, this is a little buggy I've found out)

2) install the following:

npm install --save-dev babel-polyfill babel-preset-es2015 babel-preset-stage-3 babel-register

3) fix .babelrc file:

{
  "presets": [
    "es2015",
    "stage-3"
  ]
}

4) check to see if it works (-r flag is to preload modules):

node -r babel-register -r babel-polyfill experiment/socketio/test.js

To fix nodemon:

nodemon -r babel-register -r babel-polyfill experiment/socketio/test.js

Answer 2

Async/await is handled in babeljs by the plugin transform-async-to-generator, which is included in the stage-3 preset. It's not included by default in the es2015 preset, so you'll have to add either the plugin itself or the stage-3 preset explicitly. To do that on the command line, change this line in package.json:

"babel-node": "babel-node --presets=es2015 --ignore='foo|bar|baz'",

to read:

"babel-node": "babel-node --presets=es2015,stage-3 --ignore='foo|bar|baz'",

adding the stage-3 preset. The same could also be achieved like so:

"babel-node": "babel-node --presets=es2015 --plugins=transform-async-to-generator --ignore='foo|bar|baz'",

However, it's generally recommended practice to use the .babelrc configuration file, which could be as simple as:

{
  "presets": ["es2015", "stage-3"]
}

or

{
  "presets": ["es2015"],
  "plugins": ["transform-async-to-generator"]
}

and then the line in your package.json could just be:

"babel-node": "babel-node --ignore='foo|bar|baz'",

---

(original answer for comment context)

You need to add:

"plugins": ["transform-async-to-generator"]

to your .babelrc, as I don't believe async/await is included in any of the standard presets (since it can be implemented in multiple ways)