babel 编译后导致_typeof无限递归调用 Maximum call stack size exceeded

问题：

项目使用的babel (版本 @babel/core 7.13.8），在我引用一个第三方JS库时，程序执行时会报Maximum call stack size exceeded错误。断点调试发现babel会将typeof 编译为_typeof（一个babel实现的辅助函数），而这个_typeof函数的代码有问题，导致无限递归调用自身。

之后在 node_modules/@babel/helpers/lib/helpers.js中找到了相关的源码，发现babel的代码并没有错，如下：

helpers.typeof = helper("7.0.0-beta.0")`
  export default function _typeof(obj) {
    "@babel/helpers - typeof";

    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
      _typeof = function (obj) { return typeof obj; };
    } else {
      _typeof = function (obj) {
        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype
          ? "symbol"
          : typeof obj;
      };
    }

    return _typeof(obj);
  }
`;

如果代码中有typeof的话，这段代码会被加到编译后的代码中。

注意上面代码中的红字，我用到的js库在编译后这个typeof会变成 “_typeof”（或_typeof2, _typeof3之类的），也就是如下：

function _typeof(obj) {
    "@babel/helpers - typeof";
    if (typeof Symbol === "function" && _typeof(Symbol.iterator) === "symbol") {
　　　　...
    } else {
　　　　...
    }
    return _typeof(obj);
}

所以，代码只要执行到这里就会导致无限递归了。

解决方法：

最后发现是 .babelrc的配置有问题，改成下面就好了：

{
  "presets": [
      [
          "@babel/preset-env",
          {
              "targets": "> 0.5%, not dead"
          }
      ]
  ],
  "comments": false,
  "ignore": []
}

 

BABEL官方相关问题的贴子

https://github.com/babel/babel/issues/3836，

https://github.com/babel/babel/issues/9127