Async Await

Ever since node 7.10.1 async-await functionality has been available, making our asyncronous code look more like syncronous code and therefore more readable.

The Problem

With my node up to date, I began using async await in my code. I was loving how clean and readable everything was when I ran into an error. My async code was running well in our API (using the Express.js framework) but was getting an error in our React front end:

ReferenceError: regeneratorRuntime is not defined

The solution

Luckily the solution was simple. I needed to add the babel-polyfill package because Babel uses the regenerator module to transform async and generator functions.

yarn add babel-polyfill

So that my package.json included:

"dependencies": {
  ...
  "babel-polyfill": "^6.23.0",
  ...
}

I then had to add it to my webpack files as the first entry. Note I had steered away from this solution, but inevitably came back to it, realizing I hadn't put 'babel-polyfill' at the beginning of the entry array.

module.exports = {
  entry: ['babel-polyfill', './src/app'],
  ...
};

Another Note: Don't forget your production webpack config. If you seperate dev and proudtion like we do you'll fix the issue only to run into it again.