Babel 6 regeneratorRuntime is not defined

Handling Polyfills with Babel

Polyfills: The Superheroes of Babel

Even with its translating prowess, Babel doesn't naturally involve some new ECMAScript features. Here, we call up the superheroes: polyfills. We'll call on our trusty sidekick babel-polyfill to emulate a full ES2015+ environment. This guy should be the first at the scene (at the top of your app entry point).

Preparing your Webpack

Dressing up your Webpack correctly is crucial. To swerve away from regeneratorRuntime horrors, place "babel-polyfill" as the headliner in your webpack.config.js:

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};


For those using mocha to perform tests, make sure that your package.json scripts enlist both babel-core/register and babel-polyfill:

"scripts": {
  "test": "mocha --compilers js:babel-core/register --require babel-polyfill"
}


Curating your presets and plugins

Teaching Babel the tricks with es2015 and stage-0 presets in your .babelrc can help it prepare async/await classes better. But if it's waves of async/await coming at you, your backpack should have babel-plugin-transform-runtime with { "regenerator": true } in the mix.

{
  "presets": ["es2015", "stage-0"],
  "plugins": [["transform-runtime", { "regenerator": true }]]
}


Looking ahead into Babel 7

While we're caught up with Babel 6, taking a flyer over Babel 7 can set us up for future upgrades. With all its jazz and snazz with @babel/preset-env and @babel/plugin-transform-runtime, it's going to be a fun ride with async/await.

Preserving strict mode

Using strict mode keeps you on the safe side with functions like async/await. It also ensures scope cleanliness and handles errors like a boss.

Implementations & Pitfalls

Present and future with preset-env

Instead of listing "es2015" and "stage-0" separately, babel-preset-env performs a ninja move by calculating the plugins and polyfills required based on targeted environments. This technique saves the day by optimizing your build to include only what's relevant to your browsers or environments.

Polyfill what you need

Beyond Babel 7.4.0, "@babel/polyfill" hands the baton to "core-js" and "regenerator-runtime". For early versions, an early 'babel-polyfill' import can provide necessary regeneratorRuntime to bypass critical errors.

Targeting environments

Use the browserslist database to identify your babel-preset-env targets. This avoids using a magic 8-ball for deciding your configuration strategy, ensuring transpiled code efficiency.

Upgrade path to Babel 7

Consider moving base to Babel 7 if it fits your production needs. It offers seamless async/await handling and polyfilling, via tools like @babel/plugin-transform-runtime and @babel/preset-env with { useBuiltIns: 'usage' }.