regeneratorRuntime is not defined

[eostrom]

After adding Babel in the Class Components lesson, I restarted the server with npm run dev:mock, chose an animal and a breed, pressed Submit, and got this:

SearchParams.js:6 Uncaught ReferenceError: regeneratorRuntime is not defined
    at _requestPets (SearchParams.js:6)
    at requestPets (SearchParams.js:6)
    at onSubmit (SearchParams.js:37)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
    at executeDispatch (react-dom.development.js:561)
    at executeDispatchesInOrder (react-dom.development.js:583)
    at executeDispatchesAndRelease (react-dom.development.js:680)

I don't fully understand the cause or how to solve it, but from a Babel issue I think the gist is that Babel is generating code that depends on babel-polyfill, and we aren't including it. I got the code running again by adding import "babel-polyfill"; to the top of App.js, but that might not be the best solution.

I'm also getting some build warnings that may or may not be related:

⠏ Building hmr-runtime.js...Browserslist: caniuse-lite is outdated. Please run next command npm update caniuse-lite browserslist

WARNING: We noticed you're using the useBuiltIns option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the corejs option.

You should also be sure that the version you pass to the corejs option matches the version specified in your package.json's dependencies section. If it doesn't, you need to run one of the following commands:

npm install --save core-js@2 npm install --save core-js@3
yarn add core-js@2 yarn add core-js@3

[tjoaquini]

@eostrom try the solution in the following link. It worked for me.

jestjs/jest#7579 (comment)

Here is how my .babelrc file looks like

{
	"presets": [
		"@babel/preset-react", 
		["@babel/preset-env", { "targets": { "node": "current" } }]
	],
	"plugins": ["@babel/plugin-proposal-class-properties"]
}

[btholt]

Yeah, the key there is preset-env. Regenerator allows you to do generators with ES5 code and the way that async/await is translated is by making it work with generators. So once you started targeting node: current it basically told Babel to stop translating from async/await to ES5-compatible Regenerator code.

[earthtone]

There is a known bug in parcel that can cause this error, regardless of how your .babelrc is configured. Bumping all targets in the browserslist node in package.json to "last 1 X" fixes this bug for me without needing babel-polyfill or deviating .babelrc from the course notes.