使用Babel的@babel/runtime后出现regeneratorRuntime未定义错误怎么办？

爱学习的明月提问于 2026-02-04 10:58:26 阅读 82

工具

我在项目里用@babel/runtime代替内联辅助函数后，运行时突然报错”regeneratorRuntime is not defined”。之前用runtime-corejs3配置的preset，试过安装regenerator-runtime并手动引入，但打包后还是报同样错误。

我的.babelrc配置是这样写的：


{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]

webpack里已经引入了@babel/plugin-transform-runtime，但错误只在异步函数调用时出现。是不是需要额外配置regenerator相关的插件？

我来解答赞 4 收藏

反馈

1 条解答

Good“玉佩 Lv1

这个问题我也遇到过，用 @babel/runtime 的时候确实容易踩这个坑。出现 regeneratorRuntime is not defined 错误，一般是因为 Babel 的异步函数转换机制缺少了 regenerator-runtime 的支持。

你说你已经装了 regenerator-runtime 也手动引入过，但还是报错，那多半是因为引入方式不对，或者某些插件没配全。

我的做法是：

1. 确保安装了 regenerator-runtime：
npm install --save regenerator-runtime

2. 在入口文件顶部手动添加：
import "regenerator-runtime/runtime";

或者使用 Webpack 的 entry 配置把它加进去：

entry: {

     app: ['regenerator-runtime/runtime', './src/index.js']

   }

3. 然后重点来了，@babel/plugin-transform-runtime 默认不会自动包含 regenerator。你需要安装 @babel/runtime-corejs3（你可能已经装过）：
npm install --save @babel/runtime-corejs3

并在 .babelrc 或 babel.config.js 中显式配置 plugin-transform-runtime：

{

  "plugins": [

    [

      "@babel/plugin-transform-runtime",

      {

        "corejs": 3,

        "helpers": true,

        "regenerator": true

      }

    ]

  ]

}

一定要把 regenerator: true 加上，否则异步函数的 regenerator 部分不会被转换。

4. 如果你用了 preset-env，建议也加上 targets 配置，让 Babel 根据目标环境决定要不要用 regenerator：

{

  "presets": [

    [

      "@babel/preset-env",

      {

        "targets": {

          "chrome": "60"

        },

        "useBuiltIns": "usage",

        "corejs": 3

      }

    ]

  ]

}

我之前就是漏了 plugin-transform-runtime 里的 regenerator: true，导致即使引入了 runtime 也还是会报错。

另外，检查一下你是不是用了 async/await 但目标环境不支持 Promise（比如老版 IE），那肯定也会走 regenerator，所以 targets 要设对。

总之，关键是三点：手动引入 regenerator-runtime、配置 plugin-transform-runtime 时启用 regenerator、确认环境是否需要 polyfill。这样基本就能解决这个报错了。

2026-02-04 11:03