Warning: useRouter must be used inside a <RouterProvider> component! Error Component Stack

[imSamiul]

I am creating an authenticated route using the TanStack Router documentation. According to the docs, I need to create an inner component like this:

function InnerApp() {
  const auth = useAuth();
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} context={{ auth }} />
    </QueryClientProvider>
  );
}

Next, I need to pass this inner component inside the <AuthProvider> as follows:

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <AuthProvider>
      <InnerApp />
    </AuthProvider>
  );
}

Currently, I am using useRouter() inside the AuthProvider like this:

const router = useRouter();
const login = (token: string) => {
  Cookies.set("token", token, { expires: 7 });
  
  setIsAuthenticated(true);
  router.invalidate();
};

However, useRouter() is showing a warning in the Chrome console: "Warning: useRouter must be used inside a component! Error Component Stack."

How can I remove this warning, or how can I resolve this issue?

[schiller-manuel]

you currently have a circular dependency. to break it up, use the router not via the hook, but directly as returned from createRouter

[imSamiul]

I'm sorry for not getting back to you sooner. How can I do that (directly access the returned value of createRouter) without using useRouter() hook? Is there any code example?

[schiller-manuel]

just import the router returned from createRouter (if in another file) and directly reference it

[schiller-manuel]

you could also look into using Wrap and InnerWrap (router option)

[pulgueta]

just import the router returned from createRouter (if in another file) and directly reference it

Does this work on Start? I'm getting the same error. I'm trying to move from rslib to vite but have suffered from tons of errors:

Warning: useRouter must be used inside a <RouterProvider> component!
TypeError: Cannot read properties of null (reading 'isServer')
    at ScriptOnce (file:///Users/user/dev/project/node_modules/@tanstack/react-router/dist/esm/ScriptOnce.js:5:15)

[rauhryan]

just import the router returned from createRouter (if in another file) and directly reference it

Does this work on Start? I'm getting the same error. I'm trying to move from rslib to vite but have suffered from tons of errors:

Warning: useRouter must be used inside a <RouterProvider> component!
TypeError: Cannot read properties of null (reading 'isServer')
    at ScriptOnce (file:///Users/user/dev/project/node_modules/@tanstack/react-router/dist/esm/ScriptOnce.js:5:15)

Took me a while to figure out, but I moved my provider wrapper that uses useRouter createRouter.InnerWrap

My AuthProvider needs access to useRouter, I got it working using InnerWrap

  const router = createRouter({
    // needs to be InnerWrap
    InnerWrap: ({ children }) => {
      return (
        <AuthProvider>
          {children}
        </AuthProvider>
      )
    }
  });