Clerk integration broken on >= 1.70.2: useRouter must be used inside a <RouterProvider> component
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
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
You were right. Not using bun but using npm for installing the dependencies, and running the application solved this issue. Very mysterious.
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
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 %
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.
closing this as a fix for https://github.com/TanStack/router/issues/2540 was released
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