在creat-react-app中使用BigInt,build后出现Cannot convert a BigInt value to a number报错的解决方案分享
suhang
2023年09月21日

今天在使用create-react-app创建的项目时,yarn start开发模式启动完全没有任何问题,但是使用yarn build后的文件,就会出现如下图所示的情况:

react-bigint-error_1.png
这种问题就很莫名其妙,心态炸裂…

根据堆栈信息,出错的是PublicKey.ts第19行,代码如下
react-bigint-error_2.png
但其实,vscode已经很贴心的给出了一些提示
react-bigint-error_3.png
提示的大概意思是: BigInt属于ECMAScript2020的规范,如果babel编译的target低于ES2020, 就会导致BigInt不可用。
那么问题来了,这和我们出现的Cannot convert a BigInt value to a number有什么关系呢?

经过一番百度和google,发现了一款babel插件,名字叫@babel/plugin-transform-exponentiation-operator, 翻阅文档发现, 这款插件会将

let x = 10 ** 2;

编译为:

let x = Math.pow(10, 2);

这种操作对于普通的Number来说没有影响,但对于ES2020的BigInt类型来说,这种转换就是致命的错误, Math.pow()只支持Number类型参数,传入BigInt,javascript引擎会隐式类型转换为Number,但是转换不了怎么办?当然是抛错咯,Cannot convert a BigInt value to a number它就出现了。

好了,罪魁祸首找到了,那么怎么解决这个问题呢,当然是不让它进行语法转换,咱们的项目不考虑低版本浏览器,那么删除这个babel插件吗?

当然不是,create-react-app创建的项目,已经配置好了browserslist,咱们只需要更改一下咱们项目支持的浏览器列表就行了,在package.json中加入

  "browserslist": {
    "production": [
        "last 2 chrome version",
        "last 2 firefox version",
        "last 2 safari version",
        "last 2 edge version"
    ]
   }

即可解决

但是,build后会发现,问题依然存在

巨坑!!!

yarn在更新browserslist字段之后,需要删除node_modules下面的.cache文件夹,删除之后重新yarn build,问题解决