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.