router icon indicating copy to clipboard operation
router copied to clipboard

Clerk integration broken on >= 1.70.2: useRouter must be used inside a <RouterProvider> component

Open hahnrobert opened this issue 1 year ago • 2 comments

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> component!
TypeError: Cannot destructure property 'navigate' of 'useRouter(...)' as it is null.
    at useNavigate (file:///Users/rob/workspace/eventpath.io/node_modules/@tanstack/react-router/dist/esm/useNavigate.js:4:11)
    at useAwaitableNavigate (file:///Users/rob/workspace/eventpath.io/node_modules/@clerk/tanstack-start/dist/client/useAwaitableNavigate.js:6:20)
    at ClerkProvider (file:///Users/rob/workspace/eventpath.io/node_modules/@clerk/tanstack-start/dist/client/ClerkProvider.js:18:29)
    at renderWithHooks (/Users/rob/workspace/eventpath.io/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (/Users/rob/workspace/eventpath.io/node_modules/react-dom/cjs/react-dom-server.node.development.js:5798:15)
    at renderElement (/Users/rob/workspace/eventpath.io/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/rob/workspace/eventpath.io/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/rob/workspace/eventpath.io/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
// package json
    "@clerk/tanstack-start": "^0.4.15",
   ...
    "@tanstack/eslint-plugin-query": "5.59.7",
    "@tanstack/react-form": "^0.34.0",
    "@tanstack/react-query": "5.59.15",
    "@tanstack/react-query-devtools": "5.59.15",
    "@tanstack/react-router": "1.70.2",
    "@tanstack/react-router-with-query": "1.70.2",
    "@tanstack/router-devtools": "1.70.2",
    "@tanstack/router-vite-plugin": "^1.32.17",
    "@tanstack/router-zod-adapter": "1.70.2",
    "@tanstack/start": "1.70.2",
    "@tanstack/zod-form-adapter": "^0.34.0",
    ...

Your Example Website or App

N/A

Steps to Reproduce the Bug or Issue

Follow official Clerk example from the Tanstack docs pag.e

Expected behavior

No error

Screenshots or Videos

No response

Platform

  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [e.g. Chrome, Safari, Firefox]
  • Version: [e.g. 91.1]

Additional context

No response

hahnrobert avatar Oct 20 '24 04:10 hahnrobert

I don't see how 1.70.2 could have caused this ... is this maybe caused by the package manager? see https://github.com/TanStack/router/issues/2540

schiller-manuel avatar Oct 20 '24 10:10 schiller-manuel

You were right. Not using bun but using npm for installing the dependencies, and running the application solved this issue. Very mysterious.

hahnrobert avatar Oct 20 '24 13:10 hahnrobert

I see the Clerk example in the repo failing with this with [email protected] on main this morning caae48cf3ae843a30f527fc81d66d52f4973cc80

expand for output
router % git log -1
router % pnpm --version
router % pnpm i
router % pnpm run build
router % cd examples/react/start-clerk-basic/
start-clerk-basic % pnpm i
start-clerk-basic % pnpm run dev
tomb@macbookpro router % git log -1
commit caae48cf3ae843a30f527fc81d66d52f4973cc80 (HEAD -> main, upstream/main)
Author: Logan Anderson <[email protected]>
Date:   Thu Oct 24 00:00:54 2024 -0400

    refactor(start): update app directory handling in defineConfig function (#2617)

    Co-authored-by: Sean Cassiere <[email protected]>
tomb@macbookpro router % pnpm --version
9.12.2
tomb@macbookpro router % git stash pop
On branch main
Your branch is up to date with 'upstream/main'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   examples/react/start-clerk-basic/.env

no changes added to commit (use "git add" and/or "git commit -a")
Dropped refs/stash@{0} (c34c7a70621ba8eaff8917e754e18b4ebbc670c6)
tomb@macbookpro router % pnpm i
Scope: all 78 workspace projects
Lockfile is up to date, resolution step is skipped
Packages: +1454
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 1454, reused 1446, downloaded 0, added 1454, done
dil
devDependencies:
+ @arethetypeswrong/cli 0.16.4
+ @eslint-react/eslint-plugin 1.15.0
+ @playwright/test 1.48.1
+ @tanstack/config 0.13.4
+ @types/node 22.7.4
+ @types/react 18.3.11
+ @types/react-dom 18.3.0
+ eslint 9.13.0
+ eslint-plugin-react-hooks 5.1.0-rc-fb9a90fa48-20240614
+ eslint-plugin-unused-imports 4.1.4
+ glob 11.0.0
+ jsdom 25.0.1
+ nx 19.8.6
+ prettier 3.3.3
+ publint 0.2.11
+ react 18.3.1
+ react-dom 18.3.1
+ redaxios 0.5.1
+ rimraf 6.0.1
+ typescript 5.6.3
+ typescript51 <- typescript 5.1.6
+ typescript52 <- typescript 5.2.2
+ typescript53 <- typescript 5.3.3
+ typescript54 <- typescript 5.4.5
+ typescript55 <- typescript 5.5.4
+ vite 5.4.9
+ vitest 2.1.3

. preinstall$ node -e "if(process.env.CI == 'true') {console.info('Skipping preinstall...')} else {process.exit(1)}" || npx -y only-allow pnpm
└─ Done in 1.8s
Done in 22.2s
tomb@macbookpro router % pnpm run build

> root@ build /Users/tomb/router
> nx affected --target=build --exclude=e2e/** --exclude=examples/**


 NX   Affected criteria defaulted to --base=main --head=HEAD

 NX   No tasks were run

View logs and run details at https://nx.app/runs/rwWuxTE754

tomb@macbookpro examples % cd examples/react/start-clerk-basic/
tomb@macbookpro start-clerk-basic % pnpm i
Scope: all 78 workspace projects
../../.. preinstall$ node -e "if(process.env.CI == 'true') {console.info('Skipping preinstall...')} else {process.exit(1)}" || npx -y only-allow pnpm
└─ Done in 1.8s
Done in 3.6s
tomb@macbookpro start-clerk-basic % pnpm run dev

> tanstack-start-example-clerk-basic@ dev /Users/tomb/router/examples/react/start-clerk-basic
> vinxi dev

vinxi v0.4.3
vinxi starting dev server

♻️  Generating routes...
✅ Processed routes in 276ms
(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.
(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling. (x2)

  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ServerFn Request: /Users/tomb/router/examples/react/start-clerk-basic/app/routes/__root.tsx - $$function0

ServerFn Response: 200
 - Payload: {"user":{"sessionClaims":null,"sessionId":null,"userId":null,"actor":null,"orgId":null,"orgRole":nul...

ServerFn Request: /Users/tomb/router/examples/react/start-clerk-basic/app/routes/__root.tsx - $$function0

ServerFn Response: 200
 - Payload: {"user":{"sessionClaims":null,"sessionId":null,"userId":null,"actor":null,"orgId":null,"orgRole":nul...

Warning: useRouter must be used inside a <RouterProvider> component!
TypeError: Cannot destructure property 'navigate' of 'useRouter(...)' as it is null.
    at useNavigate (file:///Users/tomb/router/packages/react-router/dist/esm/useNavigate.js:4:11)
    at useAwaitableNavigate (file:///Users/tomb/router/node_modules/.pnpm/@[email protected]_@tanstack+react-router@packages+react-router_@tanstack+start@pac_6me5y2wcer565gq3bnt4s2wd4a/node_modules/@clerk/tanstack-start/dist/client/useAwaitableNavigate.js:6:20)
    at ClerkProvider (file:///Users/tomb/router/node_modules/.pnpm/@[email protected]_@tanstack+react-router@packages+react-router_@tanstack+start@pac_6me5y2wcer565gq3bnt4s2wd4a/node_modules/@clerk/tanstack-start/dist/client/ClerkProvider.js:18:29)
    at renderWithHooks (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5798:15)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderNode (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6336:12)
    at renderChildrenArray (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6288:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6218:7)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6048:9)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderMemo (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5945:3)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6088:11)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at finishClassComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5754:3)
    at renderClassComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5762:3)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6020:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at finishClassComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5754:3)
    at renderClassComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5762:3)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6020:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6048:9)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
TypeError: Cannot destructure property 'navigate' of 'useRouter(...)' as it is null.
    at useNavigate (file:///Users/tomb/router/packages/react-router/dist/esm/useNavigate.js:4:11)
    at useAwaitableNavigate (file:///Users/tomb/router/node_modules/.pnpm/@[email protected]_@tanstack+react-router@packages+react-router_@tanstack+start@pac_6me5y2wcer565gq3bnt4s2wd4a/node_modules/@clerk/tanstack-start/dist/client/useAwaitableNavigate.js:6:20)
    at ClerkProvider (file:///Users/tomb/router/node_modules/.pnpm/@[email protected]_@tanstack+react-router@packages+react-router_@tanstack+start@pac_6me5y2wcer565gq3bnt4s2wd4a/node_modules/@clerk/tanstack-start/dist/client/ClerkProvider.js:18:29)
    at renderWithHooks (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5798:15)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderNode (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6336:12)
    at renderChildrenArray (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6288:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6218:7)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6048:9)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderMemo (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5945:3)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6088:11)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at finishClassComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5754:3)
    at renderClassComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5762:3)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6020:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at finishClassComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5754:3)
    at renderClassComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5762:3)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6020:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6048:9)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
/Users/tomb/router/packages/start/dist/esm/server/defaultStreamHandler.js:58
          throw err;
          ^

TypeError: Cannot destructure property 'navigate' of 'useRouter(...)' as it is null.
    at useNavigate (file:///Users/tomb/router/packages/react-router/dist/esm/useNavigate.js:4:11)
    at useAwaitableNavigate (file:///Users/tomb/router/node_modules/.pnpm/@[email protected]_@tanstack+react-router@packages+react-router_@tanstack+start@pac_6me5y2wcer565gq3bnt4s2wd4a/node_modules/@clerk/tanstack-start/dist/client/useAwaitableNavigate.js:6:20)
    at ClerkProvider (file:///Users/tomb/router/node_modules/.pnpm/@[email protected]_@tanstack+react-router@packages+react-router_@tanstack+start@pac_6me5y2wcer565gq3bnt4s2wd4a/node_modules/@clerk/tanstack-start/dist/client/ClerkProvider.js:18:29)
    at renderWithHooks (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5798:15)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderNode (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6336:12)
    at renderChildrenArray (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6288:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6218:7)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6048:9)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderMemo (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5945:3)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6088:11)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at finishClassComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5754:3)
    at renderClassComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5762:3)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6020:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at finishClassComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5754:3)
    at renderClassComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5762:3)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6020:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderElement (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6048:9)
    at renderNodeDestructiveImpl (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/tomb/router/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)

Node.js v18.18.0
 ELIFECYCLE  Command failed with exit code 1.
tomb@macbookpro start-clerk-basic %

thomasballinger avatar Oct 24 '24 18:10 thomasballinger

But when I run this outside the monorepo it's fine!

npx degit TanStack/router/examples/react/start-clerk-basic start-clerk-basic
cd start-clerk-basic
// enter clerk keys
pnpm run dev

so something like the https://github.com/TanStack/router/issues/2540 hypothesis, although for me on pnpm version 9.12.2 I also get this. The kind of thing where two copies of React means a Provider can't be found by the useConvex() looking for it.

thomasballinger avatar Oct 29 '24 21:10 thomasballinger

closing this as a fix for https://github.com/TanStack/router/issues/2540 was released

schiller-manuel avatar Dec 08 '24 22:12 schiller-manuel

in case anynone encounter the same issue using bun, delete the node modules and bun.lockb file then run bun install again. it will solve the issue. maybe there's some cache that led to above issue

myhendry avatar Apr 13 '25 02:04 myhendry