Uncaught SyntaxError: Unexpected identifier for import _regeneratorRuntime

Question

I'm following the React setup guide for setting up React for the first time. However, I've added async/await to my code. When the preprocessor - npx babel runs, the output file looks like:

and the browser console is giving me the error:

Uncaught SyntaxError: Unexpected identifier

for the import.

I've checked that babel-runtime is in my node-modules.

My package.json dependencies looks like:

  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-react-app": "^3.1.2"
  }

Possible duplicate of [Babel 6 regeneratorRuntime is not defined](https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined) — Amir-Mousavi, Apr 11 '19 at 13:40
I installed the devDependencies from there and added the `.babelrc` file. Now the import changed to `var _regenerator = require('babel-runtime/regenerator');` and I get the error `Uncaught ReferenceError: require is not defined` — Matt McCormick, Apr 11 '19 at 13:52
Hmm, now Node-specific problem with `require`. I think its a known issue. will check. but I think better to stick to Es6 `import` — Amir-Mousavi, Apr 11 '19 at 13:56

score 0 · Answer 1 · answered Apr 12 '21 at 04:29

first of all, remove the old dependencies

npm uninstall -D babel-cli babel-preset-react-app babel-runtime

then add the latest dependencies

npm i -D @babel/core @babel/preset-react @babel/cli babel-runtime

after the latest dependencies installed package.json looks like

"devDependencies": {
    ...
    "@babel/cli": "^7.13.14",
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.9",
    "@babel/preset-react": "^7.13.13",
    "babel-runtime": "^7.0.0-beta.3",
    ...

after fixing this you might face an issue(regeneratorRuntime is not defined) then you need to add the runtime.js script in your HTML file

https://github.com/facebook/regenerator/blob/master/packages/runtime/runtime.js

Uncaught SyntaxError: Unexpected identifier for import _regeneratorRuntime

1 Answers1