TypeError do not know how to serialize a BigInt

[Soros87]

Whenever I open Redux DevTool chrome extension to inspect the store, I get this error.

VM1161:1 Uncaught TypeError: Do not know how to serialize a BigInt at JSON.stringify () at it.stringify (:1:5274) at kh (:4:2215) at j (:4:2313) at q (:6:452) at :6:3807 at g (:1:27571) at l (:1:27629) at T (:1:28063) at T (:6:5699)

[bhollis]

We're hitting this as well - our store contains bigints. This is likely the same problem as https://github.com/preactjs/preact-devtools/pull/454

[bhollis]

I ended up solving this by passing the following config when setting up devtools:

serialize: {
  replacer: (_key, value) => (typeof value === "bigint" ? value.toString() : value),
},

[dagadbm]

how can i get that working when using composeWithDevTools ?

I tried doing this and even putting a debugger on it but it never gets called.

I use redux-dynamic-modules and my setup looks like this:

import { createStore } from 'redux-dynamic-modules';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

const store = createStore(
    {
      advancedComposeEnhancers: composeWithDevTools({
        maxAge: 500,
        trace: true,
        serialize: {
          function: (_key: any, value: any) => {
            debugger; // never gets called
            return typeof value === 'bigint' ? value.toString() : value;
          },
        },
      }),
    },
  );

[dagadbm]

ok found another solution :

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

reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#use_within_json

https://github.com/GoogleChromeLabs/jsbi/issues/30

[dagadbm]

ok its just wrong typing, the first solution already works, just had to disabled typescript in that line

[ang33l]

also you can convert it to the Number, so in TypeScript:

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

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