babel: Async functions producing an error "ReferenceError: regeneratorRuntime is not defined"

Input Code

async function test() {}

Babel Configuration (.babelrc, package.json, cli command)

{
  "presets": [
    "latest"
  ]
}

Expected Behavior

I expect that the code will run just fine

Current Behavior

It produces the following code, which throws an error ReferenceError: regeneratorRuntime is not defined

"use strict";

var test = function () {
  var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
          case "end":
            return _context.stop();
        }
      }
    }, _callee, this);
  }));

  return function test() {
    return _ref.apply(this, arguments);
  };
}();

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

Possible Solution

When I have added transform-runtime plugin it also added a require statement babel-runtime/regenerator and the code was run well. But I believe that babel-preset-latest should work at it is, without additional configuration.

Your Environment

software	version
Babel	v6.21.1
node	v6.9.2
npm	v3.10.9
Operating System	Ubuntu 16.04

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 19 (14 by maintainers)

Commits related to this issue

move main module into separate file from babel-polyfill require see [babel/babel#5085](https://github.com/babel/babel/issues/5085) — committed to boneskull/nextion by boneskull 7 years ago
fixing https://github.com/babel/babel/issues/5085 — committed to robsterpsz/al-test by robsterpsz 7 years ago
Add babel-polyfill This is necessary to be able to use async/await functions, otherwise we get this error in the console at runtime: ReferenceError: regeneratorRuntime is not defined See: <http... — committed to mcmire/fakenstocks by mcmire 6 years ago
fix(Workers): Do not use async keyword These babel bugs are encountered when used in the Karma tests: https://github.com/babel/babel/issues/6956 https://github.com/babel/babel/issues/5085 Just ... — committed to thewtex/vtk-js by thewtex 6 years ago
refactor: pubsub with function showDetail — committed to norvca/todolist by norvca 4 years ago

Most upvoted comments

Update your .babelrc file according to the following examples, it will work.

If you are using @babel/preset-env package

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

or if you are using babel-preset-env package

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

+56

abbassiddiqi on Feb 5, 2018

Yeah generally I recommend

import 'babel-polyfill';
import './app';

to initialize everything.

@boneskull Keep in mind that don’t recommend that libraries load babel-polyfill. Better to use transform-runtime for library usecases.

+49

loganfsmyth on Feb 5, 2017

In my case installing babel-plugin-transform-runtime solved my issues:

npm install --save-dev babel-plugin-transform-runtime

Then, in .babelrc

{
  "plugins": [
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}

+31

iraklisg on Mar 21, 2018

@hzoo With use in Node.js, if the module which requires babel-polyfill also contains a top-level async function, loading the module will fail with a ReferenceError, because the function is moved before the call to require('babel-polyfill').

The only workaround I’ve found is to relocate the code containing the async function into a separate module, and require it after babel-polyfill.

Example gist

boneskull on Feb 5, 2017

Does that mean that transform-runtime is necessary step to run async functions? Couldn’t find it in documentation, but I will happy to contribute this if you will show where I can do it.

just-boris on Jan 10, 2017

Function declarations are hoisted before imports are processed. Generally we recommend doing something like

import "babel-polyfill";
import "./app";

if you need to use async functions in your app root.

loganfsmyth on Nov 10, 2017

Reopened as #6956.

andersk on Dec 2, 2017

@loganfsmyth I understand that’s how it works today. But should it? (Should I open a separate issue for this?)

andersk on Nov 10, 2017