deep-jade

useRouter must be used inside a <RouterProvider> component!

Running into this issue with the alpha version. Checked other threads in this server for this, but that all seems to come down to multiple versions of router running, I don't have this afaik. I ran pnpm dedupe Should the version of start and router be the same alpha as well? So alpha.22. Or can one be on 23?

36 Replies

rare-sapphire•3mo ago

can you share a reproducer ?

deep-jadeOP•3mo ago

Think it might be related to the Clerk version. Do they have a version that supports the Alpha yet? Or

rare-sapphire•3mo ago

no but I don't think that is the problem here, unless you have multiple versions of router installed in the lockfile?

deep-jadeOP•3mo ago

Here's the stacktrace:

Warning: useRouter must be used inside a <RouterProvider> component!
Error in renderToPipeableStream: TypeError: Cannot destructure property 'navigate' of 'useRouter(...)' as it is null.
    at useNavigate (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/@tanstack/react-router/src/useNavigate.tsx:18:11)
    at useAwaitableNavigate (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/@clerk/tanstack-react-start/src/client/useAwaitableNavigate.ts:8:20)
    at ClerkProvider (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/@clerk/tanstack-react-start/src/client/ClerkProvider.tsx:21:29)
    at react-stack-bottom-frame (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:9176:18)
    at renderWithHooks (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:4797:19)
    at renderElement (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:5232:23)
    at retryNode (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:5991:31)
    at renderNodeDestructive (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:5941:11)
    at renderNode (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:6398:18)
    at renderChildrenArray (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:6274:9) { componentStack: [Getter] }
Error in renderToPipeableStream: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:5734:15)
    at retryNode (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:5991:31)
    at renderNodeDestructive (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:5941:11)
    at renderNode (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:6398:18)
    at renderChildrenArray (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:6274:9)
    at retryNode (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:6015:13)
    at performWork (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:6835:17)
    at AsyncLocalStorage.run (node:internal/async_local_storage/async_hooks:91:14)
    at /Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:7577:31
    at node:internal/process/task_queues:151:7 { componentStack: [Getter] }

Warning: useRouter must be used inside a <RouterProvider> component!
Error in renderToPipeableStream: TypeError: Cannot destructure property 'navigate' of 'useRouter(...)' as it is null.
    at useNavigate (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/@tanstack/react-router/src/useNavigate.tsx:18:11)
    at useAwaitableNavigate (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/@clerk/tanstack-react-start/src/client/useAwaitableNavigate.ts:8:20)
    at ClerkProvider (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/@clerk/tanstack-react-start/src/client/ClerkProvider.tsx:21:29)
    at react-stack-bottom-frame (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:9176:18)
    at renderWithHooks (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:4797:19)
    at renderElement (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:5232:23)
    at retryNode (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:5991:31)
    at renderNodeDestructive (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:5941:11)
    at renderNode (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:6398:18)
    at renderChildrenArray (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:6274:9) { componentStack: [Getter] }
Error in renderToPipeableStream: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:5734:15)
    at retryNode (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:5991:31)
    at renderNodeDestructive (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:5941:11)
    at renderNode (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:6398:18)
    at renderChildrenArray (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:6274:9)
    at retryNode (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:6015:13)
    at performWork (/Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:6835:17)
    at AsyncLocalStorage.run (node:internal/async_local_storage/async_hooks:91:14)
    at /Users/david/Documents/code/ts/shadn-ui-configurator/node_modules/react-dom/cjs/react-dom-server.node.development.js:7577:31
    at node:internal/process/task_queues:151:7 { componentStack: [Getter] }

I don't see how I could have multiple versions of router installed? These are the only things I have in my package.json that are named TanStack:

    "@clerk/tanstack-react-start": "0.15.8",
    "@tanstack/react-query": "5.62.10",
    "@tanstack/react-router": "1.121.0-alpha.22",
    "@tanstack/react-start": "1.121.0-alpha.23",

    "@clerk/tanstack-react-start": "0.15.8",
    "@tanstack/react-query": "5.62.10",
    "@tanstack/react-router": "1.121.0-alpha.22",
    "@tanstack/react-start": "1.121.0-alpha.23",

rare-sapphire•3mo ago

which package manager do you use? pnpm can for example install multiple versions of the same dep

deep-jadeOP•3mo ago

Bun, but I don't really mind which one I use for this project

rare-sapphire•3mo ago

try again with pnpm just to make sure

deep-jadeOP•3mo ago

Tried that yesterday as well, but will try it again, sec

 ~/Documents/code/ts/shadn-ui-configurator │ main *9 !114 ?8  pnpm dev                                                                                                                          ✔ │ 25s 

> frontrow@0.0.2 dev /Users/david/Documents/code/ts/shadn-ui-configurator
> vite dev


♻️  Generating routes...
✅ Processed routes in 128ms

  VITE v6.3.5  ready in 2120 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
[vite] connected.
Warning: useRouter must be used inside a <RouterProvider> component!
Error in renderToPipeableStream: TypeError: Cannot destructure property 'navigate' of 'useRouter(...)' as it is null.

 ~/Documents/code/ts/shadn-ui-configurator │ main *9 !114 ?8  pnpm dev                                                                                                                          ✔ │ 25s 

> frontrow@0.0.2 dev /Users/david/Documents/code/ts/shadn-ui-configurator
> vite dev


♻️  Generating routes...
✅ Processed routes in 128ms

  VITE v6.3.5  ready in 2120 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
[vite] connected.
Warning: useRouter must be used inside a <RouterProvider> component!
Error in renderToPipeableStream: TypeError: Cannot destructure property 'navigate' of 'useRouter(...)' as it is null.

Same issue unfortunately

rare-sapphire•3mo ago

can you share the complete repo?

deep-jadeOP•3mo ago

Its private but I can invite

rare-sapphire•3mo ago

github? then invite schiller-manuel

deep-jadeOP•3mo ago

Done. https://github.com/dbrxnds/liquifire-configurator/tree/tanstack-rewrite

rare-sapphire•3mo ago

i guess you also tried deleting the node modules folder, right? https://github.com/TanStack/router/issues/2594#issuecomment-2799548659

GitHub

Clerk integration broken on >= 1.70.2: useRouter must be used insid...

Which project does this relate to? Router Describe the bug This works totally fine with 1.70.1 and fails as early as 1.70.2. Warning: useRouter must be used inside a <RouterProvider> componen...

deep-jadeOP•3mo ago

Yep, clean installed after everything basically And lockfiles. Found this issue as well

rare-sapphire•3mo ago

[vite] connected.
❌ Invalid environment variables: {
  DATABASE_URL: [ 'Required' ],
  CLERK_SECRET_KEY: [ 'Required' ],
  SECRET: [ 'Required' ],
  VITE_CLERK_PUBLISHABLE_KEY: [ 'Required' ]
}

[vite] connected.
❌ Invalid environment variables: {
  DATABASE_URL: [ 'Required' ],
  CLERK_SECRET_KEY: [ 'Required' ],
  SECRET: [ 'Required' ],
  VITE_CLERK_PUBLISHABLE_KEY: [ 'Required' ]
}

how can i run this locally?

deep-jadeOP•3mo ago

You can just create a .env with each of those values set to an empty string. The Vite key (as that may be actually required) is: VITE_CLERK_PUBLISHABLE_KEY=pk_test_ZGVsaWNhdGUtc3dhbi0xOC5jbGVyay5hY2NvdW50cy5kZXYk The error occures before you get anywhere

rare-sapphire•3mo ago

i can reproduce the error

deep-jadeOP•3mo ago

Cool, thanks. Will probably get rid of Clerk anywya

rare-sapphire•3mo ago

ok I got rid of that error by adding this to vite config

ssr: {
    noExternal: [
      "@clerk/tanstack-react-start",
    ],
  }

ssr: {
    noExternal: [
      "@clerk/tanstack-react-start",
    ],
  }

deep-jadeOP•3mo ago

Thanks! Will have a look at the others

rare-sapphire•3mo ago

this might actually be an issue in router itself the vite config should not be necessary

deep-jadeOP•3mo ago

Want me to create an issue or something?

rare-sapphire•3mo ago

we already have the above issue ... let me quickly try something

rare-sapphire•3mo ago

https://github.com/TanStack/router/pull/4312

GitHub

fix: don't add all @tanstack packages to noExternal by schiller-man...

this fixes the issue where a third-party dependency tries to access the router from react via the router context, but vite bundles this dependency with its own version of router and hence the route...

rare-sapphire•3mo ago

released in https://github.com/TanStack/router/releases/tag/v1.121.0-alpha.24

GitHub

Release v1.121.0-alpha.24 · TanStack/router

Version 1.121.0-alpha.24 - 6/3/25, 8:14 PM Changes Fix don"t add all @TanStack packages to noExternal (#4312) (5ea0dc7) by Manuel Schiller Docs start: remove example of Server Routes client...

rare-sapphire•3mo ago

can you please remove the noExternal config and update?

deep-jadeOP•3mo ago

That works! Thank you very much!

rare-sapphire•3mo ago

cool! thanks for reporting

deep-jadeOP•3mo ago

The same is happening for their server-side stuff, like getAuth. Got this: No HTTPEvent found in AsyncLocalStorage. Make sure you are using the function within the server runtime. from their getAuth function. Was also fixed by this

rare-sapphire•3mo ago

fixed by the noExternal? or fixed by the new release

deep-jadeOP•3mo ago

noExternal

rare-sapphire•3mo ago

so there is still some issue then so please open a github issue for this

deep-jadeOP•3mo ago

Will do so later, thanks!

magic-amber•3mo ago

Has an issue been added for this yet? I'm seeing the same warning with a slightly different stack trace (using pnpm 10.11.1):

Warning: useRouter must be used inside a <RouterProvider> component!
Error in renderToPipeableStream: TypeError: Cannot read properties of null (reading '__store')
    at useRouterState (/path/to/node_modules/.pnpm/@tanstack+react-router@1.120.15_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@tanstack/react-router/src/useRouterState.tsx:45:26)
    at useLinkProps (/path/to/node_modules/.pnpm/@tanstack+react-router@1.120.15_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@tanstack/react-router/src/link.tsx:103:25)

Warning: useRouter must be used inside a <RouterProvider> component!
Error in renderToPipeableStream: TypeError: Cannot read properties of null (reading '__store')
    at useRouterState (/path/to/node_modules/.pnpm/@tanstack+react-router@1.120.15_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@tanstack/react-router/src/useRouterState.tsx:45:26)
    at useLinkProps (/path/to/node_modules/.pnpm/@tanstack+react-router@1.120.15_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@tanstack/react-router/src/link.tsx:103:25)

rare-sapphire•3mo ago

are you using any dependency that has start / router as a dependency itself?

magic-amber•3mo ago

Yep, thanks for the reminder! There was another package in our monorepo that had the latest version installed and not the alpha. I'm not seeing the error after upgrading that package.

Gaming

Programming

useRouter must be used inside a <RouterProvider> component!

Did you find this page helpful?