使用@babel/preset-env报Can't find variable: regeneratorRuntime错误求解

错误出现的根本原因 #

regeneratorRuntime是Babel提供的全局辅助函数，用于支撑async/await、Generator函数这类ES6异步语法的ES5转译结果运行。当代码中存在这类异步语法且被Babel转译后，运行环境中没有注入该全局变量时就会触发这个报错。

你之前运行正常现在报错，是因为node_modules中依赖的包近期更新，新增了需要转译的异步语法，此前这些依赖中没有对应语法，因此不会触发报错。

@babel/preset-env配置触发报错的原因 #

1. 你当前这条babel-loader规则仅作用于node_modules目录下的JS文件，当你开启@babel/preset-env且配置兼容ie >= 10时，preset-env会自动识别依赖包中的异步语法，将其转译为需要调用regeneratorRuntime的低版本兼容代码。
2. 你没有为@babel/preset-env配置useBuiltIns和corejs参数，也没有引入@babel/plugin-transform-runtime来注入辅助函数，转译后的代码会直接调用全局的regeneratorRuntime，而你的项目中没有全局引入对应的polyfill，因此直接报错。
3. 你注释掉presets配置后，babel处理node_modules下的JS时不会转译异步语法，这类语法在绝大多数现代浏览器中都原生支持，不需要依赖regeneratorRuntime，因此报错消失。

可选解决方案 #

如果你仍需要兼容IE10，可修改preset配置自动注入所需polyfill：

presets: [['@babel/preset-env', {
  targets: 'last 2 versions, ie >= 10',
  useBuiltIns: 'usage',
  corejs: 3
}]],

如果不需要兼容低版本IE，直接移除ie >= 10的配置项，或者保留注释presets的状态即可。

内容的提问来源于stack exchange，提问作者SPQRInc