4

These are my dependencies in package.json :

"devDependencies": {
  "babel-cli": "^6.24.1",
  "babel-polyfill": "^6.23.0",
  "babel-preset-env": "^1.6.0",
  "babel-preset-stage-0": "^6.5.0",
}

I can compile just fine with "babel server -d transpiled" (I have everything in a server folder instead of src).

The problem occurs when I try to run the transpiled code with "node transpiled/index.js". I get

ReferenceError: regeneratorRuntime is not defined

I did some searching and it seemed that the issue was that I don't have babel-polyfill when using await/async, but I actually do.

Here is my index.js file

require('babel-polyfill');
require('./server');

Here is also my .babelrc file

{
  "presets": ["env", "stage-0"]
}

What exactly is going on and why am I getting this error? I already have babel-polyfill so this shouldn't be happening.

anonpd762
  • 83
  • 11
  • i would suggest to install babel-plugin-transform-regenerator npm package. and also include it let regeneratorRuntime = require("regenerator-runtime"); – amit wadhwani Aug 08 '17 at 19:52
  • I tried installing it , requiring it, and even adding it as a plugin to .babelrc but it didn't work. – anonpd762 Aug 08 '17 at 19:54
  • Possible duplicate of [Babel 6 regeneratorRuntime is not defined](https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined) – Edmundo Santos Aug 08 '17 at 19:59
  • Not a duplicate. That thread says that babel-polyfill is the solution, but it's already included in my dependencies. – anonpd762 Aug 08 '17 at 20:01
  • Did you ever find a solution, I'm in the exact same problem. – Chayemor May 22 '20 at 17:29

2 Answers2

2

I ran into the same problem today. According to this issue, the function declarations are hoisted, and they end up before the imports in the transpiled code.

To solve this issue you could change the entry point of your application, so that the first file could import the polyfill, and then import the rest of your app. Something like this:

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

Another solution is to convert your async function declarations to the variable style, so instead of this async myFunction {} you could use this const myFunction = async () => {}. That way, as the function is now a variable, it won't be hoisted before the require("babel-polyfill").

nkr
  • 3,026
  • 7
  • 31
  • 39
  • 1
    hide your functins, hide your wife cause bois been hoisting y'all declarations – Arthur Rizzo Jan 05 '18 at 20:22
  • I don't think this is it though, look at the user's imports, they do a require of babel-polyfill before they import their app (through ./server). – Chayemor May 22 '20 at 17:28
0

I had the exact same problem and have been crying over it, my set up ended having all of these:

.babelrc

{ "presets": [ "env", "stage-2", "react" ] }

To avoid hoisting this is my app.js

require('babel-register');
require('babel-polyfill');
require('./server');

Where server is where my express code actually resides.

The pièce de résistance and what finally made my set up work without that damn error, in my webpack, for the entry point, I had to add babel-polyfill first.

const webpackConfig = {
    mode: 'development',
    entry: {
        app: ['babel-polyfill', APP_ENTRY_FILE]
    },
....

I hope it helps you!

Chayemor
  • 3,577
  • 4
  • 31
  • 54