Sensei James Sensei James - 1 month ago 54
Javascript Question

Babel / Rollup errors transpiling and bundling ES2017

I'm getting an error transpiling

ES2017
JavaScript (specifically
async/await
functions) into
ES5
using Rollup and Babel:


Error transforming \src\index.js with 'babel' plugin: Options
{"modules":false} passed to
\node_modules\babel-preset-es2017\lib\index.js which does not accept
options.


My
.babelrc
file:

{
"presets": [
"es2017"
],
"plugins": [
"transform-runtime"
],
"comments": false
}


Naturally, the error goes away if I change the
presets
from
es2017
to
es2015
and comment out the
async/await
code.

Note that while the application uses
ES2017
features (i.e.
async/await
), it is published as an NPM package (as an
ES6 (ES2015)
module) that is later transpiled to generic
ES5 (ES2009)
.

How do I get past this error and get my
ES2017
happily transpiling to
ES5
?

Answer

Target es2015 in your .babelrc file:

"presets": [
    "es2015"
 ],

and preprocess the es2017 features by first adding the Rollup Async functions plugin, which:

replaces async functions with generator functions that can run in modern browsers or in most versions of node.js during bundling

Add to your project:

npm install --save-dev rollup-plugin-async

And then insert async preprocessing to your rollup.config.js plugins array, before babel():

import async from 'rollup-plugin-async';

...

plugins: [
        async(),
        babel(babelrc())
],