5

I have a Typescript/React app, that can perform async function with a then/catch promise, but not with async/await/try/catch.

The error is: Uncaught ReferenceError: regeneratorRuntime is not defined .

The error seems to come from Babel. Here is my config:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": ["babel-plugin-styled-components"]
}

How to fix this?

DoneDeal0
  • 5,273
  • 13
  • 55
  • 114

2 Answers2

8

You can find your solution at here

If I summarise then you have to install a babel plugin named plugin-transform-runtime and need to configure the .babelrc settings.

npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime

After installing these two go to the .babelrc file and add these plugins.

"plugins": [
    ["@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ],
Sajeeb Ahamed
  • 6,070
  • 2
  • 21
  • 30
  • Thanks! This worked! For anyone using webpack, make sure that you don't put this into your `webpack.config.js`, it needs to go only in your `.babel.rc`. – ABC Jul 17 '21 at 18:18
3

for babel 7

All necessary packages are included in "@babel/preset-env"

enter image description here

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": "10.0.0"
                }
            }
        ],
        "@babel/preset-react"
    ]
}

Super Basic example

import React from "react";

const Board = () => {

    const [resp_post, setResp_post] = React.useState(0);

    (async function getData() {
        setResp_post(await Promise.resolve(30));
    })();
    
    return <h1>Board {resp_post} {value}</h1>;
};

export default Board;

preset-env documentation

preset-reactlink documentation

Daniel
  • 373
  • 4
  • 10
  • 1
    `"targets": { "node": "10.0.0" }` saved my life, thank you! Also can be set to `{ targets: { node: true } }`. – Roman Karagodin May 12 '22 at 18:25
  • 1
    the exact document came from this link: but it is not very well explained for nodejs: I hope you can expand your knowledge with this: https://babeljs.io/docs/en/options#targets – Daniel May 24 '22 at 20:03