Browser error 'A non-serializable value was detected' in a React app using Redux Toolkit and Axios

[hide212131]

Overview of the issue

In a React app using Redux Toolkit, a browser error stating 'A non-serializable value was detected' appears during server calls made with Axios.

redux-toolkit.esm.js:471 A non-serializable value was detected in an action, in the path: payload.headers. Value: AxiosHeaders

This issue consistently occurs when a 'fulfilled' action, such as 'authentication/get_account/fulfilled', is dispatched in Redux.

Motivation for or Use Case

While this is not resulting in direct malfunction, it does cause confusion for the developer.

Reproduce the error

Start React app.

Related issues

22483

Suggest a Fix

Under investigation

JHipster Version(s)

• The issue is present in the React app generated by the main branch (7.10.0)
• This issue does not appear in version 7.9.3.

JHipster configuration

.yo-rc.json file

{
  "applicationType": "monolith",
  "authenticationType": "jwt",
  "baseName": "myApp",
  "buildTool": "maven",
  "cacheProvider": "ehcache",
  "clientFramework": "react",
  "clientTheme": "none",
  "creationTimestamp": 1686372694068,
  "databaseType": "sql",
  "devDatabaseType": "h2Disk",
  "devServerPort": 9060,
  "dtoSuffix": "DTO",
  "enableGradleEnterprise": null,
  "enableHibernateCache": true,
  "enableSwaggerCodegen": false,
  "enableTranslation": true,
  "entities": [],
  "entitySuffix": "",
  "gradleEnterpriseHost": null,
  "jhiPrefix": "jhi",
  "jhipsterVersion": "7.10.0",
  "languages": [
    "ja",
    "en",
    "fr"
  ],
  "messageBroker": false,
  "microfrontend": false,
  "microfrontends": [],
  "nativeLanguage": "ja",
  "packageFolder": "com/mycompany/myapp",
  "packageName": "com.mycompany.myapp",
  "pages": [],
  "prodDatabaseType": "postgresql",
  "reactive": false,
  "searchEngine": false,
  "serverPort": null,
  "serverSideOptions": [],
  "serviceDiscoveryType": false,
  "skipCheckLengthOfIdentifier": false,
  "skipClient": false,
  "skipFakeData": false,
  "skipUserManagement": false,
  "testFrameworks": [],
  "websocket": false,
  "withAdminUi": true
}

Environment and Tools

openjdk version "17.0.7" 2023-04-18 OpenJDK Runtime Environment Temurin-17.0.7+7 (build 17.0.7+7) OpenJDK 64-Bit Server VM Temurin-17.0.7+7 (build 17.0.7+7, mixed mode, sharing)

git version 2.39.2 (Apple Git-143)

node: v18.14.2 npm: 9.5.0

Docker version 23.0.5, build bc4487a

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

• [X] Checking this box is mandatory (this is just to show you read everything)

[hide212131]

The AxiosHeaders is a class, which is why it's non-serializable.

Do Not Put Non-Serializable Values in State or Actions

Avoid putting non-serializable values such as Promises, Symbols, Maps/Sets, functions, or class instances into the Redux store state or dispatched actions.

The solution seems to be adding 'headers' to the already existing ignoredActionPaths .

I'll submit a PR.

[Gautam-Ranpariya]

A non-serializable value was detected in an action, in the path: payload. Value: AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …} Take a look at the logic that dispatched this action: {type: 'auth/alreadyUser/fulfilled', payload: AxiosError, meta: {…}} (See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants) (To allow non-serializable values see)

how to solve this error ?