Error: A non-serializable value was detected in an action, in the path

[phyolim]

trafficstars

Library versions

• react-aad-msal: 2.3.5
• msal: 1.3.1

Describe the bug "A non-serializable value was detected in an action, in the path: payload" - output in console.

Expected behavior No error output in console.

To Reproduce Clone the repo created with CRA - boilerplate template https://github.com/phylim/cra-boilerplate-playground Fill in authority and clientId values in authProvider.js Start the server and run the application. AzureAD wrapper is in HomePage component. The error will print out in console on page load.

I've been using AzureAD component with original react-boilerplate project for a while without any issue. This new cra template uses redux-toolkit. I looked at the payload and type in reducer. It all seems to be just fine. I'm not sure where the IdTokenResponse is coming from in the attached error logs.

[phyolim]

This happens only when server is running in dev mode.

[phyolim]

I did some more digging. This error output happens because CRA template uses @reduxjs/toolkit to configure the store. Looks like reduxjs toolkit has mechanisms to identify non-serializable values whereas original react boilerplate doesn't.

[rtrap-rsi]

did you found a way to fix it or a workaround?

[AndrewCraswell]

Thanks for pointing this out, I found the same issue a week back when playing with Redux Toolkit. We can do better by serializing the ID Token that gets saved to Redux. Alternatively, you can just delete those properties in your reducer if it's preferred.

Another alternative is to disable the errors for dev by disabling the serialization middleware the Redux Toolkit has enabled for dev by default: https://redux-toolkit.js.org/api/getDefaultMiddleware

In reality, there's a number of fixes that should happen to the Redux integration -- namely improving TypeScript strong typing, and removing any non-serializable entries.