"regeneratorruntime is not defined"

2020-03-24

 | 

~2 min read

 | 

395 words

Deciding to not bootstrap my React-Playground app is the gift that keeps on giving.

Not only do I have the pleasure of getting to use new technologies of my choosing (today it was authentication with Auth0), but I also get to learn Webpack when something invariably goes wrong.

When I added Toasts I couldn’t load the CSS styles needed for the toasts because I had misconfigured the CSS Loader.

Today, it was the regeneratorRuntime.1

Building my app went fine, but when I went to use it, it crashed immediately.

Auth0Context.js:145 Uncaught ReferenceError: regeneratorRuntime is not defined
    at eval (Auth0Context.js:145)
    at Auth0Provider (Auth0Context.js:193)
    at renderWithHooks (react-dom.development.js:16320)
    at mountIndeterminateComponent (react-dom.development.js:18735)
    at beginWork$1 (react-dom.development.js:20084)
    at HTMLUnknownElement.callCallback (react-dom.development.js:362)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:411)
    at invokeGuardedCallback (react-dom.development.js:466)
    at beginWork$$1 (react-dom.development.js:25730)
    at performUnitOfWork (react-dom.development.js:24638)

I started by reviewing my code to make sure I hadn’t missed anything. Once I’d convinced myself that the issue didn’t lay with me, I started looking around for others who had faced similar problems.

It turns out that many others had run into this same problem - and they’d fixed it using Babel.

Unfortunately, I’m not using Babel, at least not directly. That is, I don’t have a .babelrc file where I’m configuring my plugins and presets.

So, I needed to do it directly in Webpack (this is what I meant about how I get to just keep learning more about Webpack).

Fortunately, Webpack had the answer in their docs:2

const path = require('path');
const webpack = require('webpack');

module.exports = {
  ...
  module: {
    rules: [
      {
        test: [/\.js$/, /\.jsx?$/],
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/env', '@babel/react'],
          plugins: ['@babel/plugin-transform-runtime'],
        },
      },
    ...
    ],
  },
};

Notice that I only installed @babel/plugin-transform-runtime as a dependency (time will tell if I need to add @babel/runtime).

Once done, and I rebuilt my project, the errors evaporated. Woo!

Update: Babel has removed these presets and deprecated others. Instead of @babel/env we now have @babel/preset-env. Instead of @babel/react, we now have @babel/preset-react. Jakob Lind has a great write up on some of the nuances at play here as they relate to what babel is actually doing and how it works. Check it out!

Footnotes


Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!