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 preactjs/preact-devtools#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

GoogleChromeLabs/jsbi#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) }

[ItsHarper]

       serialize: {
          function: (_key: any, value: any) => {
            debugger; // never gets called
            return typeof value === 'bigint' ? value.toString() : value;
          },
        },

I'm not sure why you're putting a field named function on the serialize object (I'm sure that's why Typescript was complaining). Here's how to do it more properly:

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

[KoljaFrahm]

For me it had in total to look like this to not have console errors anymore:

export const store = configureStore({
  reducer: {
// all your reducers
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: {
        isSerializable: (value: unknown) => {
          return typeof value === 'bigint' || isPlain(value);
        }
      }
    }).concat(apiSlice.middleware),
  devTools: {
    serialize: {
      replacer: (_key, value) => {
        return typeof value === 'bigint' ? value.toString() : value;
      }
    }
  }
});

Does this solution make sense?