Cannot read properties of undefined (reading 'getStreamedValue') when using @tanstack/react-router-with-query

[epenflow]

I've encounteren an error :

Cannot read properties of undefined (reading 'getStreamedValue')

This happens when using tanstack query and tanstack routes along with the @tanstack/react-router-with-query package. Is the @tanstack/react-router-with-query only compatible with tanstack start?

import { useSuspenseQuery } from '@tanstack/react-query';
import { createFileRoute, redirect } from '@tanstack/react-router';
import AppContainer from '~/components/layouts/app/app-container';
import ROLES from '~/lib/enums/roles';
import { usersQueryOptions } from '~/lib/users/hook';

export const Route = createFileRoute('/_layout/dashboard/user')({
	loader({ context: { queryClient } }) {
		queryClient.ensureQueryData(usersQueryOptions);
	},
	beforeLoad({ context: { auth } }) {
		if (auth.user?.role !== ROLES.ADMIN) {
			throw redirect({
				to: '/dashboard',
			});
		}
	},
	component: RouteComponent,
});

function RouteComponent() {
	const postsQuery = useSuspenseQuery(usersQueryOptions);
	const users = postsQuery.data.data;
	return (
		<AppContainer>
			{users.map((user) => (
				<div key={user.id}>{user.username}</div>
			))}
			<p>users</p>
		</AppContainer>
	);
}

export const routerWithQuery = () => {
	const auth = useAuth.getState();
	const router = createRouter({
		routeTree,
		context: {
			queryClient: query,
			auth,
		},
		defaultPreload: 'intent',
		defaultPreloadStaleTime: 0,
		scrollRestoration: true,
	});

	return routerWithQueryClient(router, query);
};

declare module '@tanstack/react-router' {
	interface Register {
		router: ReturnType<typeof routerWithQuery>;
	}
}

[schiller-manuel]

it only makes sense to use with Start, or at least any SSR. Are you using pure CSR?

[epenflow]

Ya, I'm using pure CSR

[schiller-manuel]

so you should just not use this package. just use query as shown in the examples, such as https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-react-query-file-based

[epenflow]

Thanks for your advice. I Thought it could run on CSR

[godcong]

So that's the problem... I've been debugging it for days, but I can't find what's wrong.

changed it to example finally: https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-react-query-file-based