Bug: react-devtools TypeError: Do not know how to serialize a BigInt

[leidegre]

What is the current behavior?

TypeError: Do not know how to serialize a BigInt which makes it so the react dev tools cannot inspect the component props.

Steps to reproduce

1. Set a component prop to some value of type BigInt.
2. Open Chrome DevTools, then React Components view, try inspecting the component
3. There will be an exception here (with the message above)

You can repro this with the following https://codesandbox.io/s/mystifying-cache-jshv3

Note that you need to repo via Chrome DevTools so that the bridge is active, if you use the codesandbox built-in DevTools the behavior is different.

What is the expected behavior?

That bigints are handled in a similar way to how symbols are handled. So that they don't crash when they cross a boundary, i.e. postMessage.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Latest version, hasn't worked before. That I know. Tested in Chrome and Firefox, although the behavior isn't exactly the same in Firefox as in Chrome, it doesn't appear to work in Firefox either.

I would like to propose a fix for this but I cannot find where in the source this would go. I don't care for editing capabilities and such, I just don't want the dev tools to give up on my just because I have BigInts in my code.

[abrahamwilliam]

i would like to work on this bug fix, Please provide inputs admin

[abrahamwilliam]

Hi John , @leidegre

react\packages\react-devtools-extensions\src\backend.js
const {initBackend} = require('react-devtools-shared/src/backend');
initBackend(hook, agent, window);

the initBackend method is rendering the component along with the props you have defined, please make use of the below backendjs and indexjs in shared to check on more,
\react\packages\react-devtools-shared\src\backend\index.js

export function initBackend();

I also would like to contribute to the issue, if you have time this weekend or some other date, lets sit and look into it.We can discuss in the Discord, in PST discord id-abrahamwilliam007

[nutboltu]

@abrahamwilliam Sorry I didn't track your comments. I started work on this issue and already opened a PR. Feel few to review. We may come up some better workaround.

[leidegre]

@bvaughn Any chance we could get this fixed? We have a very clear problem statement with a purposed fix and this is really hurting me as I use BigInts everywhere in my React app... It's crashing the dev tools all the time...

[bvaughn]

I'll review the PR tomorrow. (I'm in London at the moment and it's late.)

[zedfight]

add the toJSON method on the prototype：

declare global {
    interface BigInt {
        toJSON(): string;
    }
}

BigInt.prototype.toJSON = function() {       
        return this.toString()
}