T
TanStack•2y ago
ratty-blush

[DevTools] Uncaught TypeError: contextMap[utilName] is not a function

Upgrading to 1.0.6 or beta-280 from beta-279 causes the following error when using inside of the RouterProvider 
createHooksInternal-f1d4019d.mjs:146 Uncaught TypeError: contextMap[utilName] is not a function
    at createHooksInternal-f1d4019d.mjs:146:39
    at Object.apply (index-f91d720c.mjs:67:20)
    at JSON.stringify (<anonymous>)
    at displayValue (utils.ts:111:15)
    at DefaultRenderer (Explorer.tsx:191:43)
    at Explorer (Explorer.tsx:275:10)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
createHooksInternal-f1d4019d.mjs:146 Uncaught TypeError: contextMap[utilName] is not a function
    at createHooksInternal-f1d4019d.mjs:146:39
    at Object.apply (index-f91d720c.mjs:67:20)
    at JSON.stringify (<anonymous>)
    at displayValue (utils.ts:111:15)
    at DefaultRenderer (Explorer.tsx:191:43)
    at Explorer (Explorer.tsx:275:10)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
The above error occurred in the <Explorer> component:

    at Explorer (http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:347:3)
    at div
    at http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:131:5
    at div
    at http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:131:5
    at Explorer (http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:347:3)
    at div
    at http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:131:5
    at div
    at http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:131:5
    at Explorer (http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:347:3)
    at App (http://localhost:5174/src/App.tsx?t=1704080168877:27:25)
The above error occurred in the <Explorer> component:

    at Explorer (http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:347:3)
    at div
    at http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:131:5
    at div
    at http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:131:5
    at Explorer (http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:347:3)
    at div
    at http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:131:5
    at div
    at http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:131:5
    at Explorer (http://localhost:5174/node_modules/.vite/deps/@tanstack_router-devtools.js?v=6491a8a3:347:3)
    at App (http://localhost:5174/src/App.tsx?t=1704080168877:27:25)
22 Replies
ratty-blush
ratty-blushOP•2y ago
If I manually pass the router instance (with the same versions), I get the following error: 
Uncaught TypeError: Cannot read properties of null (reading '__store')
    at useRouterState (RouterProvider.tsx:233:26)
    at TanStackRouterDevtoolsPanel2 (devtools.tsx:529:23)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateForwardRef (react-dom.development.js:19226:20)
    at beginWork (react-dom.development.js:21636:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
Uncaught TypeError: Cannot read properties of null (reading '__store')
    at useRouterState (RouterProvider.tsx:233:26)
    at TanStackRouterDevtoolsPanel2 (devtools.tsx:529:23)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateForwardRef (react-dom.development.js:19226:20)
    at beginWork (react-dom.development.js:21636:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
In either way, I am using the code as provided in the docs: https://tanstack.com/router/v1/docs/devtools#only-importing-and-using-devtools-in-development
Devtools | TanStack Router Docs
Link, take this sword... I mean Devtools!... to help you on your way! Wave your hands in the air and shout hooray because TanStack Router comes with dedicated devtools! 🥳
ratty-blush
ratty-blushOP•2y ago
Any help would be greatly appreciated as I am unable to upgrade past beta-279, unless I remove the devtools.
like-gold
like-gold•2y ago
Could you confirm in your package.json that both @tanstack/react-router and @tanstack/router-devtools are at 1.0.6 If not, try npm install @tanstack/react-router@latest @tanstack/router-devtools@latest. If so, maybe try rm -rf your node_modules and give it a fresh npm install. As someone on 1.0.6, I can confirm that the devtools package indeed works.
ratty-blush
ratty-blushOP•2y ago
Thank you @Sean Cassiere. I looked at the examples as well and I can see them working. I can confirm that the versions are the same. I get the same issue when doing a fresh install. I had a little bit of an unconventional setup as I was trying to add a context. I think something broke that. 
function AppRouterProvider() {
  const utils = trpc.useContext();

  return (
    <RouterProvider
      router={router}
      context={{
        trpcClient: utils,
      }}
    />
  );
}
function AppRouterProvider() {
  const utils = trpc.useContext();

  return (
    <RouterProvider
      router={router}
      context={{
        trpcClient: utils,
      }}
    />
  );
}
And in the main, I would use just <AppRouterProvider />. I will have to find a different place to pass the context. Thanks @Sean Cassiere!
like-gold
like-gold•2y ago
Provided your react-query and tRPC Providers are above the AppRouterProvider you really should be fine. It's honestly weird that it's breaking at all.
ratty-blush
ratty-blushOP•2y ago
Yes, react-query and tRPC providers are above the AppRouterProvider. There is something going on with the const utils = trpc.useContext();. If I pass any other state to the context, it works fine. Somehow passing the utils is causing the error. What doesn't make sense is passing the context causes issues with the devtools
ratty-blush
ratty-blushOP•2y ago
Ok, I am getting closer. In beta.279, the options in the DevTools is by default minimised. In beta.280 and above (including 1.0.6, it is expanded by default. In 279, if I try to expand the options tab, I get the same error.
No description
No description
ratty-blush
ratty-blushOP•2y ago
This is why I am seeing a difference between 279 vs 280 (and above). Seems like this didnt work before either.
ratty-blush
ratty-blushOP•2y ago
ratty-blush
ratty-blushOP•2y ago
@Sean Cassiere / @Tanner Linsley Does it make sense to file a bug for this on Github?
like-gold
like-gold•2y ago
If you could replicate it on Stackblitz or Codesanbox, it certainly seems like something that deserves a GH Issue. You could start here, and add the react-query and trpc stuff: https://stackblitz.com/github/TanStack/router/tree/main/examples/react/with-trpc
StackBlitz
Router With Trpc Example - StackBlitz
Run official live example code for Router With Trpc, created by Tanstack on StackBlitz
ratty-blush
ratty-blushOP•2y ago
Thanks @Sean Cassiere . I was able to reproduce it in the stackblitz and created an issue here: https://github.com/TanStack/router/issues/909
GitHub
[DevTools] Obscure error "contextMap[utilName] is not a function" w...
Describe the bug When passing a context to the Router with the trpc.useUtils() hook causes an obscure error. function MyApp() { const utils = trpc.useUtils(); return <RouterProvider router={rout...
ratty-blush
ratty-blushOP•2y ago
Out of curiosity, if I wanted to debug this, how would I make changes to the devtools package? Is it possible to do within stackblitz or what would be the ideal way?
like-gold
like-gold•2y ago
I'm pretty sure you'd need to for the Router repo, add your example and then debug from there on.
ratty-blush
ratty-blushOP•2y ago
Ok thanks!
like-gold
like-gold•2y ago
I've added a couple comments to your github issue. Gist of it is, that I think you were trying to pass React-only utils to your context that broke stuff. Since the trpc-utils are only really useful for invalidating queries from the QueryClient, I used the recommended method from the trpc docs for achieving it.
ratty-blush
ratty-blushOP•2y ago
Thanks Sean. I clarified your comment.
like-gold
like-gold•2y ago
Got it working 🙌🏼 https://github.com/TanStack/router/issues/909#issuecomment-1874818888
GitHub
[DevTools] Obscure error "contextMap[utilName] is not a function" w...
Describe the bug When passing a context to the Router with the trpc.useUtils() hook causes an obscure error. function MyApp() { const utils = trpc.useUtils(); return <RouterProvider router={rout...
ratty-blush
ratty-blushOP•2y ago
@Sean Cassiere Can you look at the ticket again?
like-gold
like-gold•2y ago
Replied
ratty-blush
ratty-blushOP•2y ago
Holy moly. Thanks @Manuel Schiller and @Tanner Linsley for fixing this! You guys are rockstars.
rival-black
rival-black•2y ago
Mostly @Manuel Schiller

Did you find this page helpful?