Parcel out of the box does "regeneratorRuntime is not defined" error even with your browserlist from your guide!

[ghost]

Hello, Brian! I am going through your course now. At the point where async call appears (https://btholt.github.io/complete-intro-to-react-v5/async), Parcel out of the box bundles app with "regeneratorRuntime is not defined" error even after I copied your browserlist to my package.json file.

So I tried to resolve this issue and I found out that "last 2 OperaMobile versions" option gives that error. So I want you to check it out and fix browserlist in your Guide. Sorry for bothering for such stupid thing, which it may be, but it still an issue that I encountered with.

My package.json file

{
    "name": "adopt-me",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "dev": "parcel src/index.html",
        "format": "prettier \"src/**/*.{js,html}\" --write",
        "lint": "eslint \"src/**/*.{js,jsx}\" --quiet"
    },
    "repository": "https://github.com/ellenripley4/react-adopt-me.git",
    "author": "Andrei Margiev <[email protected]>",
    "license": "MIT",
    "devDependencies": {
        "babel-eslint": "^10.0.3",
        "eslint": "^6.6.0",
        "eslint-config-prettier": "^6.5.0",
        "eslint-plugin-import": "^2.18.2",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-react": "^7.16.0",
        "eslint-plugin-react-hooks": "^2.2.0",
        "parcel-bundler": "^1.12.4",
        "prettier": "^1.18.2"
    },
    "dependencies": {
        "@frontendmasters/pet": "^1.0.3",
        "react": "^16.11.0",
        "react-dom": "^16.11.0"
    },
    "browserslist": [
        "last 2 Chrome versions",
        "last 2 ChromeAndroid versions",
        "last 2 Firefox versions",
        "last 2 FirefoxAndroid versions",
        "last 2 Safari versions",
        "last 2 iOS versions",
        "last 2 Edge versions",
        "last 2 Opera versions",
        "last 2 OperaMobile versions"
    ]
}

[delphinefoo]

Thanks so much for posting the fix, @ellenripley4 ! Was getting the same error.

[stormwatch]

This should be marked as duplicate of #55 or #48

[zdaniel827]

I was getting this error as well. Since i was just using chrome, I updated the browserslist to just include "last 2 Chrome versions" and i was able to proceed without error

[ghost]

npm install @babel/plugin-transform-runtime

navigate to your .babelrc and make sure it is added to plugins array like so....

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

[1Marc]

Parcel cannot use modern JavaScript's async/await out of the box any longer.

1. The simplest solution: Cut down the list of supported browsers in your package.json down to:

    "browserslist": [
        "last 2 Chrome versions",
    ]

2. More involved solution: If you want to get async working with the larger list of browsers (listed in the course videos), you must install @babel/plugin-transform-runtime like @dhawkvq suggests.

npm install @babel/plugin-transform-runtime

Then create a .babelrc file and paste in the following babel configuration:

{
  "plugins": ["@babel/plugin-transform-runtime"]
}

Here's the code diff for your reference – here I also updated all the dependencies as well.

FYI you'll have to merge it into the final config later in the course:

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