[bug] TanStack Router adapter: search params with array of objects serialized as [object Object]

[gensmusic]

Context

What's your version of nuqs?

"nuqs": "2.6.0"

What framework are you using?

• ✅Other (TanStack Router)

Which version of your framework are you using?

"@tanstack/react-router": "1.x"
"react": "18.x"

Description

When using Nuqs with the TanStack Router adapter,
search params containing objects or arrays of objects are incorrectly serialized into strings like: [object Object]

This causes parsing errors when using parseAsJson or custom parsers (e.g. shadcn-table sorting state).

Expected behavior:
The adapter should follow TanStack Router’s default serialization (JSON.stringify / JSON.parse) so that objects/arrays are stored as valid JSON strings in the URL.

We previously discussed this issue here:
#953 (comment)

Reference docs:
https://tanstack.com/router/latest/docs/framework/react/guide/custom-search-param-serialization

Reproduction

[pvalines]

Hii Is there any update on this?
I am also facing similar issue with tanstack/react-router@1.131.35 and nuqs@2.7.0

[michaelparkadze]

No updates? Any workarounds?

[itamarzwi]

@franky47 Is this on the radar? Whatever happened to this suggested fix? We would love to use nuqs for our tanstack router app but this bug is one we can't ignore

[teleskop150750]

@gensmusic

Why don't you consider changing the default settings for Tanstack?

[rennokki]

While this is awaiting fix, you can do this as a workaround:

import {
  defaultStringifySearch,
  useLocation,
  useNavigate,
  useParams,
} from "@tanstack/react-router";

function YourComponent() {
  const navigate = useNavigate();
  const { path } = useParams({ strict: false }); // Not sure if strict: false is required.

  const search = useLocation({
    select: (state) => Object.fromEntries(Object.entries(state.search)),
  });

  const searchParams = useCallback(
    (s: URLSearchParams) => {
      // For some reason, fromEntries(s.entries()) is required for it to work.
      return new URLSearchParams(defaultStringifySearch(Object.fromEntries(s.entries())));
    },
    [search],
  );

  return (<NuqsAdapter processUrlSearchParams={searchParams}>
    // ...
  </NuqsAdapter>);
}