TypeError: Cannot convert a BigInt value to a number

[eliashezron]

Expected behavior

view screen on deployment

Actual behavior

failing to view screen on deployment because of the error, This is the error TypeError: Cannot convert a BigInt value to a number that seems to be coming from the converter.ts file. line 40 in the screenshot below

Steps to reproduce the behavior

1. [First step]
   create-react-app
2. [second step]
   install the lastest web3 package yarn add web3
3. [third step]
   build the project
4. [and so on...]
   deploy to netlify or vercel

Logs

Environment

npm 9.6.2
node v18.15.0
web3js v4.0.1
OS macOS
device macbook

[Muhammad-Altabba]

Thanks @eliashezron for opening an issue.

However, in order to help you, we need the code that caused the error. And it will be great if you could make it available at some cloud IDE like https://codesandbox.io/.

Thanks,

[eliashezron]

so I am trying to create an chrome extension, I create a reactapp and the add web3 package to the app, Then call a function to get the balance of an address, Build and deploy. Thats where the error comes from. try it out here

https://codesandbox.io/s/web3jstypeerrorcannot-convert-a-bigint-value-to-a-number-cljhk7?file=/src/App.js:772-788

[Xaber20110202]

Same problem, I just set version to 1.9.0, solved this problem. @eliashezron

[valentin-uskov]

@eliashezron Hi!
Same problem. Change browsers list in package.json, solved this problem

"browserslist": {
    "production": [
      "chrome >= 67",
      "edge >= 79",
      "firefox >= 68",
      "opera >= 54",
      "safari >= 14"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

[eliashezron]

@eliashezron Hi! Same problem. Change browsers list in package.json, solved this problem

"browserslist": {
    "production": [
      "chrome >= 67",
      "edge >= 79",
      "firefox >= 68",
      "opera >= 54",
      "safari >= 14"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

This solution worked for me. Thank you @valentin-uskov

[milaabl]

@eliashezron , indeed @valentin-uskov is a life saver! Thanks

[Edison4mobile]

@valentin-uskov
you saved my time.

[devilbcsswap]

@eliashezron Hi! Same problem. Change browsers list in package.json, solved this problem

"browserslist": {
    "production": [
      "chrome >= 67",
      "edge >= 79",
      "firefox >= 68",
      "opera >= 54",
      "safari >= 14"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

Fkkk. You saved my life. Thanks.

[Muhammad-Altabba]

Thanks all for your shared findings.
We will try to look deeper into this.

[dhruv2185]

@eliashezron Hi! Same problem. Change browsers list in package.json, solved this problem

"browserslist": {
    "production": [
      "chrome >= 67",
      "edge >= 79",
      "firefox >= 68",
      "opera >= 54",
      "safari >= 14"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

Thank you very much, wasn't able to fix this bug for days. You are a lifesaver!

[mconnelly8]

Per 9/5 meeting, need to investigate.

[inspi-writer001]

@eliashezron Hi! Same problem. Change browsers list in package.json, solved this problem

"browserslist": {
    "production": [
      "chrome >= 67",
      "edge >= 79",
      "firefox >= 68",
      "opera >= 54",
      "safari >= 14"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

Thanks man, I've been on this for daysss

Finally, your solution helped me

[inspi-writer001]

also , if you're using web3.js on the baackend, say a nodejs app,

use module import Web3 from "web3" instead of const Web3 = require("web3")
this'll prevent the "Web3 is not a constructor" issue

[moojing]

@eliashezron Hi! Same problem. Change browsers list in package.json, solved this problem

"browserslist": {
    "production": [
      "chrome >= 67",
      "edge >= 79",
      "firefox >= 68",
      "opera >= 54",
      "safari >= 14"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

Fkkk. You saved my life. Thanks.

this solve my problem too!! Even I'm in other similar situation! thx.

[Muhammad-Altabba]

Hi all,
This issue is because React uses babel for transpilation. And babel has issues with bigint as you can find here: babel/babel#13109
And so, not only react applications will face this issues. But also any application that uses babel unless it add the browserslist to package.json as described in the issue: babel/babel#13109 and as pointed in: #6187 (comment).

However, we will try to overcome this by avoid using ** with BigInt. So, in the next version there would be no need to add something to your package.json.

[Muhammad-Altabba]

The code has been modified so this issue should not be present once the next release takes a place.

If anyone still face this issue, one of the following should resolve it:

• If you are using web3.js version <= 4.1.2, apply this: TypeError: Cannot convert a BigInt value to a number #6187 (comment)
• Update web3.js version to 4.2.0

However, if one of the above did not solve your issue. Please provide the full details and steps to replicate the case. And preferably provide your code at a cloude IDE.