Using async/await with babel - require(“babel-polyfill”) line not at the top in built file

Question

I am trying to use ES2017 async/await syntax with Babel. In package.json, I have

\"babel\": {
    \"plugins\": [
      \"babel-plugin-transform         


        

Answer 1

I think that the require() call must come before the async function (and since functions are hoisted, and you set them up in the same file, the polyfill is loaded later).

Try to require('babel-polyfill') in an earlier stage in the module system. Something like this:

// A.js
require('babel-polyfill');
const foo = require('./B.js');

foo().then(console.log);

// B.js
async function foo() {
  return 10;
}

module.exports.foo = foo;

Answer 2

A different, and probably better solution would be to modularise your code:

• add an index.js which only exports the stuff you want to export and includes the polyfill
• add the real functions to small files that only do one thing

Answer 3

Since functions defined such as

async function foo() {
    return 10;
}

can be used before they're defined in javascript, Babel is moving it to the top of the file during transpilation.

To work around this, this try adjusting your syntax if possible:

const foo = async function() {
    return 10;
}