New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

async function hoisted above import 'babel-polyfill' ⇒ ReferenceError: regeneratorRuntime is not defined #6956

Closed
andersk opened this Issue Dec 2, 2017 · 5 comments

Comments

Projects
None yet
7 participants
@andersk

andersk commented Dec 2, 2017

Input Code

import 'babel-polyfill';
async function foo() {}

(REPL link)

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

{"presets": [["env"]]}

Expected Behavior

The import should be evaluated before the translation of the async function (which uses regeneratorRuntime and _asyncToGenerator from babel-polyfill).

'use strict';

require('babel-polyfill');

var foo = function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(…));
  return function foo() {…};
}();

function _asyncToGenerator(fn) {…}

Current Behavior

The current output fails with ReferenceError: regeneratorRuntime is not defined.

'use strict';

var foo = function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(…));
  return function foo() {…};
}();

require('babel-polyfill');

function _asyncToGenerator(fn) {…}

Although I’m not an expert on the ES7 specification, I believe this violates “NOTE: Before instantiating a module, all of the modules it requested must be available.”

Possible Solution

Both import and async function are already hoisted; import should simply be hoisted to before hoisted functions.

Context

This came up before as #5085, which was closed because you can work around it by moving the async function to a separate module. But that workaround should not be necessary. If nothing else, it’s an unnecessary trap for new users who probably think they have the wrong preset (I know I did). @loganfsmyth commented:

The interaction here is confusing and has a few cases. That said, either way I agree with you that getting the error your getting, just by declaring the code this way, is poor handling on our part. Changing the behavior of imports in our case would not be the right fix, but there is a fix we could do that we haven't done yet, which we probably should.

Your Environment

software version(s)
Babel 6.26.0
node 8.9.1
npm 5.5.1
Operating System Ubuntu 18.04
@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Dec 2, 2017

Collaborator

Hey @andersk! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

Collaborator

babel-bot commented Dec 2, 2017

Hey @andersk! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

@Andarist

This comment has been minimized.

Show comment
Hide comment
@Andarist

Andarist Dec 2, 2017

Member

As a workaround you might structure your entry point like this:

import 'babel-polyfill'
import './app' // where your async is

Bundlers should preserve order and by the moment when the async gets run there already should be regeneratorRuntime available.

Member

Andarist commented Dec 2, 2017

As a workaround you might structure your entry point like this:

import 'babel-polyfill'
import './app' // where your async is

Bundlers should preserve order and by the moment when the async gets run there already should be regeneratorRuntime available.

@zhouyu1993

This comment has been minimized.

Show comment
Hide comment
@zhouyu1993

zhouyu1993 Dec 12, 2017

hello~

I first write .bablerc like this:

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 3 versions",
            "ie >= 9",
            "ios >= 8",
            "android >= 4.2"
          ]
        },
        "useBuiltIns": "usage"
      }
    ],
    "stage-2"
  ]
}

And I don't add import 'babel-polyfill' in my entry file app.js.

It shows the error regeneratorRuntime is not defined.

So I add import 'babel-polyfill' in my entry file app.js. It works. But the file is big.

So I write .bablerc like this:

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 3 versions",
            "ie >= 9",
            "ios >= 8",
            "android >= 4.2"
          ]
        },
        "useBuiltIns": false
      }
    ],
    "stage-2"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

It don't need to add import 'babel-polyfill' in my entry file app.js. And the file is smaller.

I guess that the option useBuiltIns is something wrong.

zhouyu1993 commented Dec 12, 2017

hello~

I first write .bablerc like this:

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 3 versions",
            "ie >= 9",
            "ios >= 8",
            "android >= 4.2"
          ]
        },
        "useBuiltIns": "usage"
      }
    ],
    "stage-2"
  ]
}

And I don't add import 'babel-polyfill' in my entry file app.js.

It shows the error regeneratorRuntime is not defined.

So I add import 'babel-polyfill' in my entry file app.js. It works. But the file is big.

So I write .bablerc like this:

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 3 versions",
            "ie >= 9",
            "ios >= 8",
            "android >= 4.2"
          ]
        },
        "useBuiltIns": false
      }
    ],
    "stage-2"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

It don't need to add import 'babel-polyfill' in my entry file app.js. And the file is smaller.

I guess that the option useBuiltIns is something wrong.

thewtex added a commit to thewtex/vtk-js that referenced this issue Feb 21, 2018

fix(Workers): Do not use async keyword
These babel bugs are encountered when used in the Karma tests:

  babel/babel#6956
  babel/babel#5085

Just explicitly return a Promise instead.
@loganfsmyth

This comment has been minimized.

Show comment
Hide comment
@loganfsmyth

loganfsmyth Mar 5, 2018

Member

This should behave better in 7.x. It will only fail if you actually call the function before the polyfill loads, instead of breaking because of function hoisting.

Member

loganfsmyth commented Mar 5, 2018

This should behave better in 7.x. It will only fail if you actually call the function before the polyfill loads, instead of breaking because of function hoisting.

@loganfsmyth loganfsmyth closed this Mar 5, 2018

@tkrotoff

This comment has been minimized.

Show comment
Hide comment
@tkrotoff

tkrotoff May 18, 2018

@zhouyu1993

don't need to add import 'babel-polyfill' [...] the file is smaller

Of course!!! you don't have any polyfill!
Check https://github.com/tkrotoff/babel-preset-env-example

tkrotoff commented May 18, 2018

@zhouyu1993

don't need to add import 'babel-polyfill' [...] the file is smaller

Of course!!! you don't have any polyfill!
Check https://github.com/tkrotoff/babel-preset-env-example

tkrotoff added a commit to tkrotoff/react-form-with-constraints that referenced this issue May 21, 2018

Fix Bootstrap4 example
See async function hoisted above import 'babel-polyfill' ⇒ ReferenceError: regeneratorRuntime is not defined babel/babel#6956

@lock lock bot added the outdated label Aug 17, 2018

@lock lock bot locked as resolved and limited conversation to collaborators Aug 17, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.