How to get org-babel source block working with ES6-7?

Question

I'm having difficulty getting org-babel to evaluate this block of code with

emacs v24.5
node v5.0.0
babel-node v.6.6.5

 #+BEGIN_SRC js :cmd "babel-node"

   let arr = [1, 2]; 
   let [x, y] = arr;

   console.log(x);
   console.log(y);

 #+END_SRC

The output looks like this

/tmp/babel-3700Vaq/js-script-37003RN:2

let arr = [1, 2];
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:404:25)
    at loader (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:126:5)
    at Object.require.extensions.(anonymous function) [as .js] (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:136:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Function.Module.runMain (module.js:457:10)
    at /usr/local/lib/node_modules/babel-cli/lib/_babel-node.js:161:27
    at Object. (/usr/local/lib/node_modules/babel-cli/lib/_babel-node.js:162:7)
    at Module._compile (module.js:425:26)*

But this source block seems fine

 #+BEGIN_SRC js :cmd "babel-node"
 const numbers = [10,20,30,50];
 const multiplyBy10 = numbers.map(a => a * 10);
 console.log(multiplyBy10);

 #+END_SRC

 #+RESULTS:
 | 100 | 200 | 300 | 500 |

Edit: Added self executing function with "use strict"

#+BEGIN_SRC js :cmd "babel-node" 
(function xy() {
"use strict";
let arr = [1, 2];
let [x, y] = arr;
console.log(x);
console.log(y);
})()

#+END_SRC

#+RESULTS:

The output looks like this

/tmp/babel-13529OHt/js-script-13529MVq:6
    let [x, y] = arr;
        ^

SyntaxError: Unexpected token [
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:404:25)
    at loader (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:126:5)
    at Object.require.extensions.(anonymous function) [as .js] (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:136:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Function.Module.runMain (module.js:457:10)
    at /usr/local/lib/node_modules/babel-cli/lib/_babel-node.js:161:27
    at Object. (/usr/local/lib/node_modules/babel-cli/lib/_babel-node.js:162:7)
    at Module._compile (module.js:425:26)

Edit: Thanks to @ebpa i've managed to solve it with

npm install -g babel-preset-es2015

This is the output i'm getting after evaluating the default source block, which doesn't have a self executing function wrapper.

/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:372
          throw new Error("Couldn't find preset " + JSON.stringify(val) + " relative to directory " + JSON.stringify(dirname));
          ^

Error: Couldn't find preset "es2015" relative to directory "/tmp/babel-270346ez"
    at /usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:372:17
    at Array.map (native)
    at OptionManager.resolvePresets (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:20)
    at OptionManager.mergePresets (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:348:10)
    at OptionManager.mergeOptions (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:307:14)
    at OptionManager.init (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:465:10)
    at compile (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:81:45)
    at loader (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:126:14)
    at Object.require.extensions.(anonymous function) [as .js] (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:136:7)
    at Module.load (module.js:356:32)

Edit: Fire up a terminal and ran babel-node

> require('babel-preset-es2015');

Output

Error: Cannot find module 'babel-preset-es2015'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at repl:1:1
    at Object.exports.runInThisContext (vm.js:54:17)
    at _eval (/home/johnwind/.nvm/versions/node/v5.0.0/lib/node_modules/babel-cli/lib/_babel-node.js:102:26)
    at REPLServer.replEval (/home/johnwind/.nvm/versions/node/v5.0.0/lib/node_modules/babel-cli/lib/_babel-node.js:187:14)
    at bound (domain.js:280:14)
    at REPLServer.runBound [as eval] (domain.js:293:12)

Edit: A follow up to getting it up and running

http://rwx.io/posts/org-with-babel-node-updated/

Edit: This post gave me some clue to this piece of to puzzle

https://phabricator.babeljs.io/T6723

http://discuss.babeljs.io/t/error-parsing-jsx-with-global-installation-babel-preset-react/59/6

Edit: Finally got it working by installing a local copy

$ mkdir local_babel
$ cd local_babel
$ npm init
$ npm install --save-dev babel-cli
$ npm install --save-dev babel-core
$ npm install --save-dev babel-preset-es2015
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

created a softlink for babel-node

$ cd /usr/local/bin
$ ln -s ~/local_babel/node_modules/babel-cli/bin/babel-node.js org-babel-node

.zshrc

export npm_config_prefix=$HOME/.node_modules
export PATH=$PATH:$HOME/.node_modules/bin

Added this to my init.el

(setenv "NODE_PATH"
    (concat
        "/home/johnwind/local_babel/node_modules" ":"
         (getenv "NODE_PATH")
    )
)

output

#+BEGIN_SRC js :cmd "org-babel-node --presets es2015" 

let arr = [1, 2];
let [x, y] = arr;

console.log(x);
console.log(y);

#+END_SRC

#+RESULTS:
: 1
: 2
: undefined

For now I have both local and global copy of babel-cli, babel-core, babel-preset-es2015 . Which still couldn't quite wrap my head around this as it's kind of a waste of resources.

But it works.

Did you try adding `"strict"` in the first line of your source code? This is what the error seems to suggest. — wvxvw, Mar 08 '16 at 14:55
it didn't work. Did you manage to get them working ? if so, could you elaborate the steps taken. — Johnathan Foong, Mar 08 '16 at 16:41
@JohnathanFoong I think @wvxvw meant `"use strict"` not `"strict"`, try that. — Jordon Biondo, Mar 08 '16 at 16:49
this is the error i'm getting from after adding "use strict" SyntaxError: Unexpected token [ at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:404:25) ... — Johnathan Foong, Mar 08 '16 at 16:53
Maybe you should wrap that code into a self invoking function, and add `"use strict";` at the beginning. — caisah, Mar 08 '16 at 20:11

score 6 · Accepted Answer · answered Mar 08 '16 at 20:27

6

This is an issue with the Babel 6 transition to using plugins exclusively. You need to install the es2015 preset plugin:

npm install -g babel-preset-es2015

and also require it in the invocation command:

#+BEGIN_SRC js :cmd "babel-node --presets es2015"
let arr = [1, 2];
let [x, y] = arr;

console.log(x);
console.log(y);
#+END_SRC

answered Mar 08 '16 at 20:27

ebpa

7,319
26
53

Thanks for the fix, and now i face a new challenge below – Johnathan Foong Mar 08 '16 at 20:49
And you have it installed globally? Try running a script outside emacs with just `require ('babel-preset-es2015');` to see that it's installed and accessible – ebpa Mar 08 '16 at 20:57
I ran the above on babel-node in a terminal and the output was Error: Cannot find module 'babel-preset-es2015' .... – Johnathan Foong Mar 08 '16 at 21:39
after a quick run on babel-doctor, i notice i'm missing a .babelrc . How should i deal with this ? – Johnathan Foong Mar 08 '16 at 21:40
if `babel-preset-es2015` was successfully installed globally you probably have a problem with your `NODE_PATH`. As far as .babelrc goes `babel-node --presets es2015` accomplishes the same thing as `{ "presets": ["es2015"] }` in your .babelrc, so a .babelrc isn't strictly necessary. .babelrc would definitely be preferred, but for some reason babel-node never considers ~/.babelrc on my system. – ebpa Mar 08 '16 at 21:53

How to get org-babel source block working with ES6-7?

Edit: Finally got it working by installing a local copy

1 Answers1