This works for me. Just config .babelrc as

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

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?

To babel7 users (Parcel >= 1.10.0):

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

@Timespace7

This works for me. Just config .babelrc as

Can avoid adding .babelrc by just adding this to your package.json (babel automatically picks it up)

"browserslist": [
  "last 2 Chrome versions"
]

EDIT: just noticed other people had mentioned browserslist too, but didn’t see the actual code (for anyone looking for a quick solution)

Adding regenerator-runtime solved the problem for me.

// index.js
import 'regenerator-runtime/runtime'

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.

Shouldn’t at least parcel should understand what async means and load the regeneratorRuntime?

I still have this issue with parcel 2 alpha 3.2 and with a properly set browserslist and only on build. serve works fine.

Adding regenerator-runtime solved the problem for me.

// index.js
import 'regenerator-runtime/runtime'

Thank you! Seems like there should be clear instructions on this. I tried three solutions before one worked.

See the second to last comment in https://github.com/parcel-bundler/parcel/issues/3012 Which talks about adding

  "browserslist": ["last 1 Chrome versions"],

To the browserlist in package.json. That fixed this for me. keeps out the runtime.

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”.

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)

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…

Hello, I’m experiencing the same issue today and I wish that Parcel detects the need of whatever polyfill required by itself just like it does for everything else, and, by doing so, preserving 0-config comfort. Thanks !

Thanks @balazs4!

Adding regenerator-runtime solved the problem for me.

// index.js
import 'regenerator-runtime/runtime'

This is what babel recommends!

@babel/polyfill

🚨 As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):

import "core-js/stable";
import "regenerator-runtime/runtime";

https://babeljs.io/docs/en/babel-polyfill

Facing this exact same issue now!

Quite frustrating, because parcel seems to do everything else smartly! Im going with promises as of now, as async/await seems to not work with parcel

Sorry, so how do I use async/await with a fresh parcel project? I’m targeting the latest browsers so I’d rather not include a polyfill if I don’t need to.

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

Whenever using .babelrc with parcel@next on my typescript project I now get parsing error on serve and build. What’s the actual workaround to this? I don’t think importing transpile-focused libraries into my app’s codebase makes too much sense as this should be more of a configuration option in the bundler.

With that said I now have an app that works nicely locally with parcel serve (without .babelrc) but doesn’t run on production when using parcel build due to the missing regeneratorRuntime. And thinking this wasn’t an issue at all with Typescript any more 😦

update

I have managed to include regeneratorRuntime by simply setting the browserlist property on my package.json to something like "Chrome 70", as follows:

{
   "name": "test",
   "version": "0.0.1",
   ...,
    "browserslist": "Chrome 70",
   ...
}

However, I don’t understand why when NOT declaring browserslist (which then defaults to >0.25%), I still get the error even when using a modern browser with async/await support, i.e: Firefox 75 ?

install latest parcel v2 npm i -g parcel@2.0.0-alpha.3.2 fix this error

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 :\

@timwis You need to add a browserslist to your package.json file. Little demo here.

Works on Firefox, Safari, and Chrome on my machine; probably works for a few versions older as well, just no way of checking that here.

Otherwise, if you use TypeScript instead (you can just rename your files to have a .ts extension, you don’t need to actually use TypeScript), you don’t need to add the browserslist at all.

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):

{
  "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"
  }
}

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 👍

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"]
}

@devongovett @DeMoorJasper I am using the latest parcel 2 and still encountering this issue. I tried adding the import ‘regenerator-runtime/runtime’; in my index.js file but the browser is still throwing the error. Also tried adding the browserlist but still to no avail. Help please!

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).

@mischnic thanks a lot for the clarifications

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

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

Well, this “non-issue” doesn’t happen when using other bundlers.

@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/

However, I don’t understand why when NOT declaring browserslist (which then defaults to >0.25%), I still get the error even when using a modern browser with async/await support, i.e: Firefox 75 ?

Yup, same issue here. That makes no sense.

@balazs4 As I said, if one is running Chromium V74+ there should be no need for the runtime. (Indeed I can use other bundlers with babel and that works without the runtime support).

@Timespace7 how come it doesn’t work with @babel/preset-env?

Thank you for answers,

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