regeneratorRuntime is not defined #112

osenvosem · 2016-12-30T07:10:07Z

I use the latest Chrome 55, it supports generators. It works well if only I exclude transform-generator explicitly. With useBuiltIns: true I also got the issue. It seems to be a bug.

// webpack.config.js
  module: {
    rules: [{
      test: /\.jsx?$/,
      include: SRC,
      loader: 'babel-loader',
      options: {
        "presets": [ "react",
          [ "env", {
            "targets": {
              "browsers": [ "last 2 versions" ]
            },
            //exclude: [ 'transform-regenerator' ],
            "modules": false
          }]
        ]
      }
    }]
  }

I suppose the preset should include babel-plugin-transform-regenerator if it needed, but it doesn't for some reason.

The text was updated successfully, but these errors were encountered:

yavorsky · 2016-12-30T11:31:33Z

Hi! transform-regenerator plugin was included because you defined last 2 versions of all browsers supported by the preset. (See queries).

Just tried to reproduce on 55 chrome with the same configuration, but unsuccessfully.

Regardless of whether or not you are using useBuiltIns option you must require("babel-polyfill") in your startup file or somewhere before your generators declaration. If this doesn't help, please, provide log by adding debug option.

osenvosem · 2016-12-30T11:36:34Z

@yavorsky yes, i've got it already. But why it doesn't do this automatically if it's needed? Isn't this the purpose of the preset?

yavorsky · 2016-12-30T11:49:34Z

@osenvosem purpose of the preset is to support environments provided in targets. If you will change your browsers query to "last 2 Chrome versions", you can see that regeneratorRuntime is not present in your target file, so require("babel-polyfill") call is dispensable.

As I mentioned before, just last 2 versions will reflrect as:

  "chrome": 54,
  "edge": 13,
  "firefox": 49,
  "ie": 10,
  "ios": 10,
  "safari": 9,
  "opera": 41

so the preset attempts to support all of matched browsers and includes regenerator stuff.

osenvosem · 2016-12-30T11:53:44Z

Thank you.

frenzzy · 2017-02-03T22:12:14Z

My compiled bundle contains ../~/regenerator-runtime/runtime.js and ../~/regenerator-runtime/runtime-module.js before first usage but anyway I see the same regeneratorRuntime is not defined error in Chrome 56. console.log(window.regeneratorRuntime) // => undefined

Any clues?

Preset configuration:

{
  targets: {
    browsers: [
      '>1%',
      'last 4 versions',
      'Firefox ESR',
      'not ie < 9',
    ],
  },
  modules: false,
  useBuiltIns: true,
  debug: true,
}

Debug output:

babel-preset-env: `DEBUG` option

Using targets:
{
  "chrome": 49,
  "edge": 12,
  "firefox": 45,
  "ie": 9,
  "ios": 8,
  "safari": 8
}

Modules transform: false

Using plugins:
transform-es2015-arrow-functions {"chrome":47,"edge":13,"firefox":45,"ios":10,"safari":10}
transform-es2015-block-scoped-functions {"chrome":41,"firefox":46,"ie":11,"ios":10,"safari":10}
transform-es2015-block-scoping {"chrome":49,"firefox":51,"ios":10,"safari":10}
transform-es2015-classes {"chrome":46,"edge":13,"firefox":45,"ios":10,"safari":10}
transform-es2015-computed-properties {"chrome":44,"edge":12,"firefox":34,"ios":10,"safari":7}
check-es2015-constants {"chrome":49,"firefox":51,"ios":10,"safari":10}
transform-es2015-destructuring {"chrome":51,"ios":10,"safari":10}
transform-es2015-for-of {"chrome":51,"ios":10,"safari":10}
transform-es2015-function-name {"chrome":51,"ios":10,"safari":10}
transform-es2015-literals {"chrome":44,"edge":12,"ios":9,"safari":9}
transform-es2015-object-super {"chrome":46,"edge":13,"firefox":45,"ios":10,"safari":10}
transform-es2015-parameters {"chrome":49,"edge":14,"ios":10,"safari":10}
transform-es2015-shorthand-properties {"chrome":43,"edge":12,"firefox":33,"ios":9,"safari":9}
transform-es2015-spread {"chrome":46,"edge":13,"firefox":36,"ios":10,"safari":10}
transform-es2015-sticky-regex {"chrome":49,"edge":13,"firefox":3,"ios":10,"safari":10}
transform-es2015-template-literals {"chrome":41,"edge":13,"firefox":34,"ios":9,"safari":9}
transform-es2015-typeof-symbol {"chrome":38,"edge":12,"firefox":36,"ios":9,"safari":9}
transform-es2015-unicode-regex {"chrome":50,"edge":13,"firefox":46,"ios":10,"safari":10}
transform-regenerator {"chrome":50,"edge":13,"ios":10,"safari":10}
transform-exponentiation-operator {"chrome":52,"edge":14,"firefox":52}
transform-async-to-generator {"chrome":55,"firefox":52}
syntax-trailing-function-commas {"edge":14,"firefox":52,"ios":10,"safari":10}

Using polyfills:
es6.typed.data-view {"chrome":5,"firefox":15,"ie":10,"ios":6,"safari":5}
es6.typed.int8-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.uint8-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.uint8-clamped-array {"chrome":5,"edge":12,"firefox":4,"ios":10,"safari":6}
es6.typed.int16-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.uint16-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.int32-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.uint32-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.float32-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.float64-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.map {"chrome":51,"ios":10,"safari":10}
es6.set {"chrome":51,"ios":10,"safari":10}
es6.weak-map {"chrome":51,"ios":10,"safari":9}
es6.weak-set {"chrome":51,"ios":9,"safari":9}
es6.reflect.apply {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.construct {"chrome":49,"edge":13,"firefox":45,"ios":10,"safari":10}
es6.reflect.define-property {"chrome":49,"edge":13,"firefox":42,"ios":10,"safari":10}
es6.reflect.delete-property {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.get {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.get-own-property-descriptor {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.get-prototype-of {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.has {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.is-extensible {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.own-keys {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.prevent-extensions {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.set {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.set-prototype-of {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.promise {"chrome":51,"edge":13,"firefox":45,"ios":10,"safari":10}
es6.symbol {"chrome":51,"firefox":51,"ios":10,"safari":10}
es6.object.assign {"chrome":45,"edge":12,"firefox":34,"ios":9,"safari":9}
es6.object.is {"chrome":19,"edge":12,"firefox":22,"ios":9,"safari":9}
es6.object.set-prototype-of {"chrome":34,"firefox":31,"ie":11,"ios":9,"safari":9}
es6.function.name {"chrome":51,"ios":10,"safari":10}
es6.string.raw {"chrome":41,"edge":12,"firefox":34,"ios":9,"safari":9}
es6.string.from-code-point {"chrome":41,"edge":12,"firefox":29,"ios":9,"safari":9}
es6.string.code-point-at {"chrome":41,"edge":12,"firefox":29,"ios":9,"safari":9}
es6.string.repeat {"chrome":41,"edge":12,"firefox":24,"ios":9,"safari":9}
es6.string.starts-with {"chrome":41,"edge":12,"firefox":29,"ios":9,"safari":9}
es6.string.ends-with {"chrome":41,"edge":12,"firefox":29,"ios":9,"safari":9}
es6.string.includes {"chrome":41,"edge":12,"firefox":40,"ios":9,"safari":9}
es6.regexp.flags {"chrome":49,"firefox":37,"ios":9,"safari":9}
es6.regexp.match {"chrome":50,"firefox":49,"ios":10,"safari":10}
es6.regexp.replace {"chrome":50,"firefox":49,"ios":10,"safari":10}
es6.regexp.split {"chrome":50,"firefox":49,"ios":10,"safari":10}
es6.regexp.search {"chrome":50,"firefox":49,"ios":10,"safari":10}
es6.array.from {"chrome":51,"ios":10,"safari":10}
es6.array.of {"chrome":45,"edge":12,"firefox":25,"ios":9,"safari":9}
es6.array.copy-within {"chrome":45,"edge":12,"firefox":32,"ios":9,"safari":9}
es6.array.find {"chrome":45,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.array.find-index {"chrome":45,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.array.fill {"chrome":45,"edge":12,"firefox":31,"ios":10,"safari":7}
es6.array.iterator {"chrome":38,"edge":12,"firefox":28,"ios":10,"safari":7}
es6.number.is-finite {"chrome":19,"edge":12,"firefox":16,"ios":9,"safari":9}
es6.number.is-integer {"chrome":34,"edge":12,"firefox":16,"ios":9,"safari":9}
es6.number.is-safe-integer {"chrome":34,"edge":12,"firefox":32,"ios":9,"safari":9}
es6.number.is-nan {"chrome":19,"edge":12,"firefox":15,"ios":9,"safari":9}
es6.number.epsilon {"chrome":34,"edge":12,"firefox":25,"ios":9,"safari":9}
es6.number.min-safe-integer {"chrome":34,"edge":12,"firefox":31,"ios":9,"safari":9}
es6.number.max-safe-integer {"chrome":34,"edge":12,"firefox":31,"ios":9,"safari":9}
es6.math.acosh {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.asinh {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.atanh {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.cbrt {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.clz32 {"chrome":38,"edge":12,"firefox":31,"ios":9,"safari":9}
es6.math.cosh {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.expm1 {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.fround {"chrome":38,"edge":12,"firefox":26,"ios":10,"safari":7}
es6.math.hypot {"chrome":38,"edge":12,"firefox":27,"ios":10,"safari":7}
es6.math.imul {"chrome":30,"edge":12,"firefox":23,"ios":8,"safari":7}
es6.math.log1p {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.log10 {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.log2 {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.sign {"chrome":38,"edge":12,"firefox":25,"ios":9,"safari":9}
es6.math.sinh {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.tanh {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.trunc {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es7.array.includes {"chrome":47,"edge":14,"firefox":43,"ios":10,"safari":10}
es7.object.values {"chrome":54,"edge":14,"firefox":47}
es7.object.entries {"chrome":54,"edge":14,"firefox":47}
es7.object.get-own-property-descriptors {"chrome":54,"firefox":50}
es7.string.pad-start {"firefox":48,"ios":10,"safari":10}
es7.string.pad-end {"firefox":48,"ios":10,"safari":10}
web.timers {}
web.immediate {}
web.dom.iterable {}

hzoo · 2017-02-03T22:19:45Z

Check if you have require("babel-polyfill") at the top entry point/file line of your code? Doesn't seem like the same issue as ^.

I don't think we currently fail if we don't find the require anywhere (can't know that unless we check across all files)

frenzzy · 2017-02-03T22:25:59Z

I have import 'babel-polyfill'; at the top of entry point but changing to require("babel-polyfill") also does not help. Maybe I should use babel-plugin-transform-runtime?

hzoo · 2017-02-03T22:30:01Z

First: import/require is the same - changing to either won't help
2nd: don't try to use polyfill + transform-runtime because they are 2 different ways of doing the same thing.

ok lastly then it sounds like you don't have babel-polyfill as a dependency?

frenzzy · 2017-02-03T22:33:29Z

My package json with fresh rm -rf node_modules && npm install:

  "dependencies": {
    "babel-polyfill": "^6.22.0",
    ...
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-rewire": "^1.0.0",
    "babel-preset-env": "^1.1.8",
    "babel-preset-react": "^6.22.0",
    "babel-preset-react-optimize": "^1.0.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "babel-template": "^6.22.0",
    "babel-types": "^6.22.0",
    ...
  },

frenzzy · 2017-02-04T16:09:31Z

Here's what I discovered:

/* entry.js */
import 'babel-polyfill';
// other imports

// ...1...
async function run() {/* ...2... */}
// ...3...

compiled into:

/***/ 30:
/***/ (function(module, exports, __webpack_require__) {
"use strict";

var run = function () {
  // regeneratorRuntime is not defined here:
  var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee2(location) {
    // ...2...
  }));

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

__webpack_require__(47);
__webpack_require__(48);
// ...

function _interopRequireDefault(obj) {/* ... */}
function _asyncToGenerator(fn) {/* ... */}

// ...1...
// ...3...

/***/ }),

but if I declare variable instead of function then everything works well

/* entry.js */
import 'babel-polyfill';
// other imports

// ...1...
const run = async () => {/* ...2... */}
// ...3...

compiled into:

/***/ 30:
/***/ (function(module, exports, __webpack_require__) {
"use strict";

__webpack_require__(47);
__webpack_require__(48);
// ...

function _interopRequireDefault(obj) {/* ... */}
function _asyncToGenerator(fn) {/* ... */}

// ...1...
var run = function () {
  // no errors here
  var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee2(location) {
    // ...2...
  }));

  return function run(_x) {
    return _ref.apply(this, arguments);
  };
}();
// ...3...

/***/ }),

Does anyone know why the function declaration appears above than babel's helper functions in compiled code?

loganfsmyth · 2017-02-04T19:10:46Z

@frenzzy Ahh, that makes sense. Function declarations are hoisted, so they are processed before imports run, meaning that the async function gets initialized before babel-polyfill runs.

Generally I recommend a top-level entry point that does

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

or something to ensure that the polyfill loads before the app starts executing.

jnields · 2017-04-07T23:28:23Z

I also had an issue with babel-polyfill executing after function hoisting, but rather than having to set up my app around the import babel-polyfill, I just set this as my entry point in my webpack.config:

entry: ["babel-polyfill", "lib/client"]

This loads "babel-polyfill" before loading the main entry point of my app.

tylerlong · 2017-06-19T09:37:18Z

purpose of the preset is to support environments provided in targets. If you will change your browsers query to "last 2 Chrome versions", you can see that regeneratorRuntime is not present in your target file, so require("babel-polyfill") call is dispensable.

But why doesn't it get the polyfill thing done automatically? The purpose of this library is that I can just tell it the targets and it get everything ready.

If I still need to dive in to the details such as regeneratorRuntime and polyfills then what's the point of this library?

sbussard · 2017-07-31T21:11:57Z

My sentiments exactly ^

hzoo · 2017-07-31T21:20:26Z

@tylerlong including a runtime automatically is "magic", there are just as many people who complain about babel's "output" and "size" and that it's doing way more than it needs to. Yes, you shouldn't have to know all of these things (I would say it's important that a project try to remove incidental complexity and internals via abstraction but it's hard to do). Also mentioned in babel/babel#4169, but I also don't see a lot of examples of libraries or projects that include polyfills/runtime automatically.

The reason why we started this project is so you don't have to configure everything in Babel each year, etc if there is native support. In addition, I already implemented what you are asking for in https://github.com/babel/babel-preset-env/tree/2.0#usebuiltins 2.0 branch. There's still testing that needs to be done there and we're working hard to make sure it works/upgrade is good in 7.0.

why doesn't it get the polyfill thing done automatically?

This is done as I stated above, but it has caveats and why I made a few issues and discussions about this: #20 (older), #84 (old), #284, https://twitter.com/left_pad/status/847911365645938690.

The issue is that babel would need to know about every use of a polyfill in all of your code, which can be a problem if a 3rd party module (like in node_modules) needs a polyfill but you don't use it yourself in your own code. Babel (this library) wouldn't know to include it which could be an issue.

what's the point of this library

There are more uses of a library other than what you are saying (and a project's use case in general is always more than what you specifically may want it to be because oss is used by a lot of people - it happens to be that the current maintainers at the time are tasked with the job of incorporating the feedback of everyone including themselves to see what can be added to the scope of a project). It was originally created for Babel transform plugins (syntax), not polyfills. I started thinking we could use the compat-table for polyfills/built-ins a while after. We are aware of the issues.

corysimmons · 2017-08-22T19:07:06Z

Anyone know the fastest way to get this working with babel-cli (no bundler)? Just trying to tinker with async/await...

basickarl · 2017-10-16T10:54:41Z

Is there a way for .babelrc to be configured to read from .nvmrc? I din't like the idea of having to hardcode the same versions. I'm referring to:

{
    "presets": [
        ["env", {
            "targets": { 
                "node": "8" // <--- this
            }
        }]
    ],
    "env": {
        "test": {
            "plugins": ["istanbul"]
        }
    }
}

Andarist · 2017-10-16T11:06:21Z

with babel7 you will be able to create .babelrc.js and use power of javascript there to construct ur plugins/presets

with babel6 it is also possible with a fun hack:

// .babelrc
{
  "presets": [
    "./.babelrc.js"
  ]
}

basickarl · 2017-10-16T12:56:59Z

@Andarist Ah, splendid, thanks. I'll have a dive into it

osenvosem closed this as completed Dec 30, 2016

frenzzy mentioned this issue Feb 11, 2017

Use autoprefixer for babel: compile less, polyfills only for supported environments kriasoft/react-starter-kit#1115

Merged

ArtemGovorov mentioned this issue Sep 13, 2017

regeneratorRuntime is not defined wallabyjs/public#1289

Closed

hzoo added the closed: from-preset-env label Oct 5, 2017

hzoo mentioned this issue Oct 5, 2017

regeneratorRuntime is not defined babel/babel#6401

Closed

hzoo removed the closed: from-preset-env label Oct 5, 2017

emirotin mentioned this issue Dec 19, 2017

Misc refactorings botpress/botpress#321

Merged

dzienisz mentioned this issue May 19, 2018

Praca domowa nr5 - regeneratorRuntime is not defined DaftAcademy/frontend_levelup_2018#26

Open

glitchboyl mentioned this issue Dec 21, 2018

Oops, 踩了一下 Babel 的坑 glitchboyl/blog#3

Closed

wparad mentioned this issue Jan 11, 2019

Fix babel runtime. Cimpress/cimpress-customizr#7

Merged

eostrom mentioned this issue Jul 28, 2019

regeneratorRuntime is not defined btholt/complete-intro-to-react-v5#34

Closed

zombieJ mentioned this issue Jan 14, 2020

ReferenceError: regeneratorRuntime is not defined ant-design/ant-design#20842

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

regeneratorRuntime is not defined #112

regeneratorRuntime is not defined #112

osenvosem commented Dec 30, 2016 •

edited

Loading

yavorsky commented Dec 30, 2016 •

edited

Loading

osenvosem commented Dec 30, 2016 •

edited

Loading

yavorsky commented Dec 30, 2016 •

edited

Loading

osenvosem commented Dec 30, 2016

frenzzy commented Feb 3, 2017 •

edited

Loading

hzoo commented Feb 3, 2017 •

edited

Loading

frenzzy commented Feb 3, 2017 •

edited

Loading

hzoo commented Feb 3, 2017

frenzzy commented Feb 3, 2017

frenzzy commented Feb 4, 2017

loganfsmyth commented Feb 4, 2017

jnields commented Apr 7, 2017

tylerlong commented Jun 19, 2017

sbussard commented Jul 31, 2017

hzoo commented Jul 31, 2017 •

edited

Loading

corysimmons commented Aug 22, 2017

basickarl commented Oct 16, 2017 •

edited

Loading

Andarist commented Oct 16, 2017

basickarl commented Oct 16, 2017

regeneratorRuntime is not defined #112

regeneratorRuntime is not defined #112

Comments

osenvosem commented Dec 30, 2016 • edited Loading

yavorsky commented Dec 30, 2016 • edited Loading

osenvosem commented Dec 30, 2016 • edited Loading

yavorsky commented Dec 30, 2016 • edited Loading

osenvosem commented Dec 30, 2016

frenzzy commented Feb 3, 2017 • edited Loading

hzoo commented Feb 3, 2017 • edited Loading

frenzzy commented Feb 3, 2017 • edited Loading

hzoo commented Feb 3, 2017

frenzzy commented Feb 3, 2017

frenzzy commented Feb 4, 2017

loganfsmyth commented Feb 4, 2017

jnields commented Apr 7, 2017

tylerlong commented Jun 19, 2017

sbussard commented Jul 31, 2017

hzoo commented Jul 31, 2017 • edited Loading

corysimmons commented Aug 22, 2017

basickarl commented Oct 16, 2017 • edited Loading

Andarist commented Oct 16, 2017

basickarl commented Oct 16, 2017

osenvosem commented Dec 30, 2016 •

edited

Loading

yavorsky commented Dec 30, 2016 •

edited

Loading

osenvosem commented Dec 30, 2016 •

edited

Loading

yavorsky commented Dec 30, 2016 •

edited

Loading

frenzzy commented Feb 3, 2017 •

edited

Loading

hzoo commented Feb 3, 2017 •

edited

Loading

frenzzy commented Feb 3, 2017 •

edited

Loading

hzoo commented Jul 31, 2017 •

edited

Loading

basickarl commented Oct 16, 2017 •

edited

Loading