I am trying to implement streaming. The streaming seems to work apart from that error. Here are the code samples.

products-page.tsx

// Products page

import { Suspense } from 'react';
import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';
import {
  dehydrate,
  HydrationBoundary,
  QueryClient,
} from '@tanstack/react-query';

import { PageHeader } from '@/components/page-header';
import { Pagination } from '@/components/test-pagination';
import { Products } from '@/components/test-products';

export default async function Test() {
  const cookieStore = cookies();
  const authToken = cookieStore.get('auth_session');

  if (!authToken) return redirect('/auth/signin');

  const queryClient = new QueryClient();

  return (
    <div>
      <PageHeader pageTitle="Test" />
      <div className="p-8">
        <h2 className="mb-4 font-medium">Products</h2>
        <HydrationBoundary state={dehydrate(queryClient)}>
          <Suspense fallback={<div>loading products...</div>}>
            <Products />
          </Suspense>
        </HydrationBoundary>
        <Suspense fallback={<div className="mt-4">loading pagination...</div>}>
          <Pagination />
        </Suspense>
      </div>
    </div>
  );
}

products.tsx

// products component
'use client';

import { useState } from 'react';
import { type PaginationState } from '@tanstack/react-table';
import { useDebounceValue } from 'usehooks-ts';

import { apiClient } from '@/lib/api-client';

import { useCurrentTeamInfo } from '@/hooks/use-current-team-info';

export const Products = () => {
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });
  const [searchTerm, setSearchTerm] = useDebounceValue('', 10);
  const [filters, setFilters] = useState({
    categoryIds: [],
    statuses: [],
  });
  const { teamId } = useCurrentTeamInfo();

  const [data] = apiClient.products.getProducts.useSuspenseQuery(
    {
      teamId,
      limit: pagination.pageSize,
      offset: pagination.pageIndex * pagination.pageSize,
      searchTerm,
      filters,
    },
    {
      retry: false,
      refetchOnWindowFocus: false,
    }
  );

  return (
    <div>
      {data.products.map((product) => (
        <div key={product.id} className="flex items-center gap-2">
          <p>{product.productId}</p>
          <p>{product.title}</p>
        </div>
      ))}
    </div>
  );
};

provider.tsx

'use client';

import { useState } from 'react';
import type { PropsWithChildren } from 'react';
import {
  isServer,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { httpBatchLink } from '@trpc/client';
import { createContext } from 'api/trpc/context';
import superjson from 'superjson';

import { apiClient } from '@/lib/api-client';

import { createQueryClient } from './query-client';

let browserQueryClient: QueryClient | undefined = undefined;

export function getQueryClient() {
  if (isServer) {
    return createQueryClient();
  } else {
    if (!browserQueryClient) browserQueryClient = createQueryClient();
    return browserQueryClient;
  }
}

export function ApiClientProvider({ children }: PropsWithChildren) {
  const baseUrl =
    typeof window !== 'undefined'
      ? window.location.origin
      : 'http://localhost:3000'; // or your default server URL
  const queryClient = getQueryClient();

  const [trpcClient] = useState(() =>
    apiClient.createClient({
      links: [
        httpBatchLink({
          url: baseUrl + '/api',
          transformer: superjson,
        }),
      ],
    })
  );

  return (
    <QueryClientProvider client={queryClient}>
      <apiClient.Provider client={trpcClient} queryClient={queryClient}>
        {children}
      </apiClient.Provider>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}