Clickys commented 6 years ago

🐛 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 commented 6 years ago

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 commented 6 years ago

Thank you for answers,

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

DeMoorJasper commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

Clickys commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

To babel7 users (Parcel >= 1.10.0):

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

timespace7 commented 6 years ago

This works for me. Just config .babelrc as

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

rip222 commented 5 years ago

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

nodkrot commented 5 years ago

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

anjmao commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

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
It's using Babel for TS to JS transpilation. Wut?

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

devongovett commented 5 years ago

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.

jerrygreen commented 5 years ago

Hmm, yea, looks like there's no actual reason to use tsc for compilation (except on pre-commit with something like husky):

https://iamturns.com/typescript-babel/

I suppose it's better to have some explanation in wiki, because on first sight it looks like it's a drawback of Parcel that it's using Babel compiler for typescript instead of TypeScript Compiler (tsc)

timwis commented 5 years ago

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.

aleph-naught2tog commented 5 years ago

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

chrisdothtml commented 5 years ago

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

tomasdev commented 5 years ago

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

NogrTL commented 5 years ago

Had the same behavior. Got regeneratorRuntime is not defined

The most frustrating is that Chrome executed it when I opened that open w/o parcel

DrYSG commented 5 years ago

Is there any movement on this bug?

ShashankaNataraj commented 5 years ago

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

malixsys commented 5 years ago

For us, worked with:


  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-react": "^7.0.0"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-transform-runtime"
    ]
  },
  "browserslist": [
    ">0.25%",
    "ie 11",
    "not op_mini all"
  ]```

DrYSG commented 5 years ago

For us, it is not that it "works". The issue is we are targeting Chrome/Edge 74+ and we don't want or need the transform-runtime. So we got things working with this simple .babelrc, but it had to include the transform-runtime:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "chrome": 74,
                },
                "exclude": ["transform-regenerator"]
            },
            "@babel/preset-react"
        ]
    ],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

balazs4 commented 5 years ago

Adding regenerator-runtime solved the problem for me.

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

DrYSG commented 5 years ago

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

DrYSG commented 5 years ago

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.

thealexbaron commented 5 years ago

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.

tim-phillips commented 5 years ago

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

KaKi87 commented 5 years ago

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 !

uncleGena commented 4 years ago

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

KaKi87 commented 4 years ago

What about the programmatic API ? I use it on Parcel 1.x and I can't figure out how to use it on Parcel 2.x Thanks

ivanzotov commented 4 years ago

@uncleGena thanks, it works

ranisalt commented 4 years ago

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

Berkmann18 commented 4 years ago

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

That didn't solve the problem for me and parcel build errors out with:

🚨 Build failed.
@parcel/bundler-default: The expression evaluated to a falsy value:

zanona commented 4 years ago

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 ?

zavan commented 4 years ago

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.

zavan commented 4 years ago

import 'regenerator-runtime/runtime'

This will work for Node because it creates a require('regenerator-runtime/runtime');, so node will require the package.

This is not enough to make it work in the browser though, since require doesn't exist there, in the browser we need to actually bundle regenerator-runtime/runtime in our target file. To do this, I added this configuration to my package.json:

"targets": {
  "main": {
    "context": "browser",
    "includeNodeModules": true
  }
}

(assuming your target is called "main")

This will bundle regenerator-runtime/runtime (and any other external module that you import, you can also choose which ones by passing an array with their names instead of true) into your target js file, instead of just trying to require it.

This is only necessary if you want to support old browsers like IE11, if you don't, setting browserslist to a more modern configuration should work, since the native async/await calls won't be transpiled.