Bug of the month: Cannot convert a BigInt value to a number

Hello Everyone,

I encountered a puzzling bug while deploying my web3 application to production. If you're familiar with web3 frontend libraries and browser plugins like MetaMask, you might find this interesting.

The Problem:

Upon deployment, I faced an unexpected error:

Problem

Uncaught TypeError: Cannot convert a BigInt value to a number

It functioned perfectly on my local machine but caused a crash in the live environment.

Let's troubleshoot:

• Could it be a configuration problem during deployment?
  No, the local build works smoothly.

• Perhaps there's an issue with the configuration settings?
  No, they're all set correctly.

After a thorough investigation, I discovered the real culprit: browser support!

The error arises because the production build of React doesn't specify browser versions. Instead, it uses default configurations, leading to the error.

The Solution:

Simply update your package.json file as follows:

"browserslist": {
    "production": [
      "supports bigint",
      "not dead"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
}

With this adjustment, your app should run smoothly in production.

Feel free to reach out if you have any questions.

Happy coding!