TanStackT
TanStack•2y ago•
7 replies
wispy-olive

ClerkProvider + QueryClientProvider doesn't work?

I was following the start-clerk) repo and wanted to add React query to it as well but noticed that they don't mesh together well. I have the following:

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
}>()({
 ...
  beforeLoad: async () => {
    const { user } = await fetchClerkAuth();

    return {
      user,
    };
  },
  errorComponent: (props) => {
    return (
      <RootDocument>
        <DefaultCatchBoundary {...props} />
      </RootDocument>
    );
  },
  notFoundComponent: () => <NotFound />,

  component: RootComponent,
});

function RootComponent() {
  return (
    <ClerkProvider>
      <QueryClientProvider client={queryClient}>
        <RootDocument>
          <Layout>
            <Outlet />
          </Layout>
          {/* <TanStackRouterDevtools position="bottom-right" />
                <ReactQueryDevtools buttonPosition="top-right" /> */}
        </RootDocument>
      </QueryClientProvider>
    </ClerkProvider>
  );
}


And i get this error:
TypeError: Cannot read properties of undefined (reading 'addChildren')
React TanStack Router Start Clerk Basic) Example | TanStack Router ...
An example showing how to implement Start Clerk Basic) in React using TanStack Router.
React TanStack Router Start Clerk Basic) Example | TanStack Router ...
Was this page helpful?