React+Babel环境下如何支持async函数？TS项目报错修复求助

云原生阿岚

2026-5-7

这个问题我碰到过好多次了，本质是因为async/await语法依赖ES6的Generator函数，而@babel/preset-env默认不会自动引入regeneratorRuntime这个依赖项，导致浏览器识别不了相关代码。下面给你两种靠谱的解决方法，你可以根据自己的项目场景选择：

方案一：使用@babel/plugin-transform-runtime（推荐，无全局污染）

这种方法会把regeneratorRuntime这类工具函数从全局作用域换成从@babel/runtime包中导入，不会污染全局环境，适合类库或者需要严格隔离依赖的项目。

安装必要依赖
打开终端执行以下命令：

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

修改Babel配置文件
更新你的.babelrc或者babel.config.json，在plugins数组中添加@babel/plugin-transform-runtime并配置corejs选项：

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

方案二：配置@babel/preset-env自动引入polyfill

这种方法会根据你代码中实际用到的ES新特性，自动导入对应的polyfill（包括regeneratorRuntime），适合需要全局polyfill的应用类项目。

安装core-js依赖
执行命令安装3.x版本的core-js：

npm install core-js@3

修改Babel配置文件
更新@babel/preset-env的配置，添加useBuiltIns和corejs选项：

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

注意事项