Uncaught ReferenceError: regeneratorRuntime

[Clickys]

🐛 bug report

Iam trying to import and export a class from a module and i get this behavior. Every time iam trying to import the class or export it i get regeneratorRuntime .

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

{
  "name": "cooking-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^4.19.1",
    "eslint-config-airbnb-base": "^13.0.0",
    "eslint-plugin-import": "^2.13.0"
  },
  "dependencies": {
    "animate.css": "^3.6.1",
    "axios": "^0.18.0"
  }
}

🤔 Expected Behavior

Just import/export the class to the index.js

😯 Current Behavior

Instead of import/export the class i get the follow error :

js\models\foodSearch.js:6 Uncaught ReferenceError: regeneratorRuntime is not defined
at js\models\foodSearch.js:6
at js\models\foodSearch.js:12
at Object.parcelRequire.js\models\foodSearch.js.axios (js\models\foodSearch.js:12)
at newRequire (js.ee4a09a9.js:48)
at localRequire (js.ee4a09a9.js:54)
at Object.parcelRequire.js\index.js../models/famousChefQuotes (js\index.js:3)
at newRequire (js.ee4a09a9.js:48)
at parcelRequire.js\models\famousChefQuotes.js (js.ee4a09a9.js:80)
at js.ee4a09a9.js:106

........\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\util-deprecate\browser.js:14 Uncaught ReferenceError: regeneratorRuntime is not defined
at ........\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\util-deprecate\browser.js:14
at ........\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\util-deprecate\browser.js:41
at Object.parcelRequire.js\models\SearchFood.js.axios (........\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\util-deprecate\browser.js:45)
at newRequire (js.ee4a09a9.js:48)
at localRequire (js.ee4a09a9.js:54)
at Object.parcelRequire.js\index.js../models/famousChefQuotes (js\index.js:3)
at newRequire (js.ee4a09a9.js:48)
at parcelRequire.js\models\famousChefQuotes.js (js.ee4a09a9.js:80)
at js.ee4a09a9.js:106

💻 Code Sample

https://gist.github.com/Clickys/dd0d2ef946b15b0bf34b1ac23ecab3e0

🌍 Your Environment

+-- animate.css@3.6.1
+-- axios@0.18.0
+-- eslint@4.19.1
+-- eslint-config-airbnb-base@13.0.0
`-- eslint-plugin-import@2.13.0
parcel latest: '1.9.7'

[KeineLimonade]

By default parcel uses babel to transpile your code. If you use promised or async/await babel will polyfill it. But as you do not provide a polyfill get an error.

To fix this add a .babelrc file to the root of your project. You will find the right configuration by googleing something like "babel no runtimeGenerator".

[Clickys]

Thank you for answers,

By default if i want to use async/await which babel packages dependencies i should install for my project ?

[DeMoorJasper]

Install babel-polyfill and require it at the endpoint of your application, treeshaking should probably take care of trimming it down to as minimal of a polyfill as possible (once treeshaking is stable)

[Clickys]

Thank you all for your help. One irellevant question before i close this post. When iam saving a module the web browser shouldnt automatically refresh ? It only refresh when i save the main file index.js

[DeMoorJasper]

It should happen on every file, it might be a windows bug if you're on windows otherwise maybe safe-write?

[Clickys]

@DeMoorJasper When i save a module in .js the old HTML is still render in the web browser, i have to do it manually is that normal ?

[DeMoorJasper]

The HTML shouldn't change if you change js, it should reload through the socket that's been setup (called HMR). If it's just standard js (No framework) you'll probably have to write some HMR logic (either to refresh the page or handle HMR properly, probably easier to set it to refresh)

[bre7]

To babel7 users (Parcel >= 1.10.0):

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 2
    }]
  ]
}

[timespace7]

This works for me. Just config .babelrc as

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

[rip222]

following babel's docs solved my problem
https://babeljs.io/docs/en/babel-plugin-transform-runtime

[nodkrot]

@timespace7 how come it doesn't work with @babel/preset-env?

[anjmao]

I'm quite confused. I just tried parcel with Typescript and got the same error, but Typescript itself can already transform all code, why use Babel when?

[quasicomputational]

The detection of when to supply a default browserlist seems broken - it's triggered by this .babelrc:

{ "presets":
  [ [ "@babel/env"
    , { "targets":
        { "firefox": 63
        , "chrome": 71
        , "node": 11
        }
      }
    ]
  ]
}

I have to add a redundant browsers key or else things break! That's not great.

[jerrygreen]

I'm quite confused. I just tried parcel with Typescript and got the same error, but Typescript itself can already transform all code, why use Babel when?

+++

This is really broken. Parcel doesn't look smart because of that :\

BTW, I've found a workaround for the issue by downgrading parcel to 1.9.7 and having a .babelrc:

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

And adding babel-plugin-transform-runtime (6.23.0) to my package.json

It works but meeeeeh :\

[devongovett]

In Parcel 2, we'll apply polyfills automatically where needed using Babel 7's useBuiltIns: usage option. See https://babeljs.io/docs/en/babel-preset-env#usebuiltins-usage-experimental.

This would be a breaking change for Parcel 1 to do this automatically, so we're waiting for Parcel 2.

[jerrygreen]

@devongovett but wait, maybe it's needed for js but in case of typescript it sounds like a workaround for this problem. Isn't it's better to handle transpilation with tsc (typescript compiler) when typescript is used? I don't need any babel for that case - it's unnecessary, wanna get rid of it.

Because, if it's using Babel, I will better use webpack. Actually, it's one of two things I worried about:

1. Parcel shows typescript errors in a pretty strange way, the previous and current outputs are not visually divided between each other, so I can't quickly look at console and say is it all ok there or not - not really convenient - maybe just a matter of habit tho
2. It's using Babel for TS to JS transpilation. Wut?

P.S. just two cents / two comments from me, ty

[devongovett]

Hmm well the original issue wasn’t about typescript, but sure. Babel does currently run after typescript if needed. You can turn that off by setting up your browserslist properly.

That said, for parcel 2 we’re considering just compiling typescript with Babel instead of tsc since Babel 7 can do that now. That’s a separate issue though.

[DeMoorJasper]

@fab7jj not sure I can be much help without a reproducible repository of some sort, importing that package should solve it...

[fab7jj]

@DeMoorJasper to be honest with you all I am doing is using the async/await syntax and this issue popped up in the browser when that part of the code gets executed only when using the 'build' command, since while using the 'watch' or 'serve' command it is fine which is strange. Do i need to do something else besides importing that package in my index.js? declare it in the packagae.json or something? In parcel 2 there is no support for babel.rc file right?

[DeMoorJasper]

babel.rc does not exist but .babelrc is definitely supported, we even support babel.config.json now and use the official config resolver by Babel. So it's actually way better than Parcel 1 in that perspective... We pretty much have the same amount or even more features than Parcel 1 currently has.

Like I said it should work, I've never had this issue before and use async all the time

[fab7jj]

@DeMoorJasper Can you point me to some documentation on how to wire in this .babelrc config file in parcel 2 since I have seen a solution that requires installing the plugin: @babel/plugin-transform-runtime and then declare it in such file but I can't try it out since a rookie like me have no clue where to put it.

That is strange then how some of us are having this issue, the only way I now made it work is by adding the below to the package.json

"browserslist": [ "Chrome 78" ],

Only Chrome 78 worked, for example: last 1 Chrome versions did not work, but i fear that this is more of workaround rather than a proper solution

Thanks a lot

[KaKi87]

+1 for @zavan, I mean, I can understand that devs wouldn't like to fix issues that happens in v1.x while actively developing v2.x, but at least v2.x should have fixed the issue, but it didn't and that's a shame. And I'm not even talking about v2.x being very much less zero-config than v1.x...

[DeMoorJasper]

@KaKi87 this isn't an issue, this is just how babel/preset-env works... we didn't write that. Like I mentioned I can't get any of these issues to happen and use the async syntax all the time.

@fab7jj you can view the v2 docs at https://v2.parceljs.org/

[fab7jj]

@DeMoorJasper can you point me to something more specific please I can't find anything about how to use .babelrc or babel.config.json in there. For example if I want to implement this solution here how I need to do in parcel 2? Since I believe I am having issues because I have babel-runtime installed.

[KaKi87]

this isn't an issue, this is just how babel/preset-env works

Well, this "non-issue" doesn't happen when using other bundlers.

[ranisalt]

this isn't an issue, this is just how babel/preset-env works

Well, this "non-issue" doesn't happen when using other bundlers.

👍 Thin definitely is a parcel-only issue even if it originates in babel

[mischnic]

This is definitely still a problem.

One solution is using this babelrc (Parcel 2):

{
	"presets": ["@parcel/babel-preset-env"],
	"plugins": ["@parcel/babel-plugin-transform-runtime"]
}

I'll investigate why we aren't doing this by default...

[fab7jj]

@mischnic I tried the above babelrc but I am having an error when trying to run yarn start. Please see the below image. Do you have any insight why such error? Because I am a bit lost to be honest with you. Thanks!

[mischnic]

With Parcel 2, if you do specify a babel config, Parcel won't amend it, so you probably need:

{
    "presets": ["@parcel/babel-preset-env", "@babel/preset-react"],
	"plugins": ["@parcel/babel-plugin-transform-runtime"]
}

[fab7jj]

@mischnic please can you explain to me what is the difference between @parcel/babel-preset-env and @babel/preset-env since in this last example you used @babel/preset-env but in your other one you used @parcel/babel-preset-env so now I am not sure when I should use which.

Also do you have any clue why I am getting this warning: "@parcel/babel-plugin-transform-runtime > @babel/plugin-transform-runtime@7.12.1" has unmet peer dependency "@babel/core@^7.0.0-0". I am using "parcel": "^2.0.0-beta.1"

Thanks a lot

[mischnic]

you used @babel/preset-env but in your other one you used @parcel/babel-preset-env so now I am not sure when I should use which.

Sorry, you should always use @parcel/babel-preset-env because that one allows Parcel to forward browserslist information to the preset-env plugin.

Also do you have any clue why I am getting this warning: "@parcel/babel-plugin-transform-runtime > @babel/plugin-transform-runtime@7.12.1" has unmet peer dependency "@babel/core@^7.0.0-0". I am using "parcel": "^2.0.0-beta.1"

You can ignore that for now. Looks like we need to add @babel/core as a peer dependency here as well:
https://github.com/parcel-bundler/parcel/blob/eaa0137195e101438b3784400496899c275f18e8/packages/utils/babel-plugin-transform-runtime/package.json

[fab7jj]

@mischnic thanks a lot for the clarifications

[mischnic]

I'll investigate why we aren't doing this by default...

We should definitely do this, the only question is whether @parcel/babel-plugin-transform-runtime could also inject unneeded code in some situations (e.g. with if async shouldn't be transpiled according to browserslist).

[maufl]

I'm currently running into this issue. It only happens in production builds though, in development everything works automatically. I can solve it by adding import 'regenerator-runtime/runtime';. However, it seems that I need to do that in the module that actually uses async/await. Only importing it in the index does not work.

[orlovol]

Hi! Running into this too. After checking all possible solutions I've got to the following working combination.
Minimal reproducible code below (sorry, couldn't figure out how to replicate this on codesandbox):

Expand

package.json

{
  "dependencies": {
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-table": "7.6.3"
  },
  "scripts": {
    "start": "parcel serve ./index.html",
    "prestart": "rm -rf dist .parcel-cache"
  },
  "devDependencies": {
    "parcel": "2.0.0-nightly.520"
  }
}

I'm using nightly.520 as it's the latest one that works for me (522+ produces some issues with promises I'm not ready to handle) and it has fixed vulnerabilities present in beta.1 - but result should be the same for it too.

index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useAsyncDebounce } from "react-table";
const App = () => {
  const [label, setLabel] = useState("");
  const debounced = useAsyncDebounce(setLabel, 400); // Uncaught ReferenceError: regeneratorRuntime is not defined
  // const debounced = setLabel; // works
  return (
    <>
      <input
        autoComplete="off"
        type="text"
        name="name"
        defaultValue=""
        onChange={(e) => debounced(e.target.value)}
      />
      <p>{label}</p>
    </>
  );
};
ReactDOM.render(<App />, document.getElementById("app"));

Steps to make it work:

• Add babel config in package.json:

  "babel": {
    "presets": [
      "@parcel/babel-preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@parcel/babel-plugin-transform-runtime"
    ]
  }

• Run npm -i -D @parcel/babel-plugin-transform-runtime - babel config needs it
• Add import 'regenerator-runtime/runtime'; to the index.js (specific file with broken component works too)

For me, it wasn't enough to have only the babel config or the import alone - I had to add both. Otherwise, the error persists.
Hope this helps 👍

[ranisalt]

Add import 'regenerator-runtime/runtime'; to the index.js (specific file with broken component works too)

Just this line is enough for me, without any other tweaks to configurations.

[orlovol]

Add import 'regenerator-runtime/runtime'; to the index.js (specific file with broken component works too)

Just this line is enough for me, without any other tweaks to configurations.

Thanks for the reply!
Indeed, for the minimal project that seems to be enough - thank you!
However, for my personal project, I've noticed this behavior:

With import only:

1. parcel serve works fine and generates index.[hash].js with require('regenerator-runtime/runtime'); and the code for it.
2. parcel watch generates file without require and it has the error

With import & babel + plugin:

1. parcel serve works fine again
2. parcel watch generates an almost identical file to the parcel serve with the require('regenerator-runtime/runtime'); which works fine

I've kept my project setup and just replaced the index.js with the minimal code example, don't know why this happens :(

[mischnic]

@orlovol

const debounced = useAsyncDebounce(setLabel, 400); // Uncaught ReferenceError: regeneratorRuntime is not defined

I'm not 100% sure how regeneratorRuntime is supposed to work, but I do find it strange that react-table just assumes that there's a global variable of that name: https://unpkg.com/browse/react-table@7.6.3/dist/react-table.development.js (line 301).

[ranisalt]

@mischnic that is code generated by Babel. It replaces generators and async functions with that busy loop, but apparently react-table is not bundling the runtime and instead leaving it for the importer...

[EyMaddis]

In Parcel 2, we'll apply polyfills automatically where needed using Babel 7's useBuiltIns: usage option. See https://babeljs.io/docs/en/babel-preset-env#usebuiltins-usage-experimental.

I cannot find this anywhere in Parcel 2s Codebase. Both dev/preset-env and utils/preset-env use 'entry'

[alexjab]

I'm still having this issue with parcel 2.0.1, and none of the aforementioned solutions worked for me. I'm using React-Table as well.

I managed to get it "working" by writing require('regenerator-runtime/runtime') in my index source file, instead of import.

This looks brittle, but I hope it helps someone else.