T
TanStack•2w ago
correct-apricot

How to use dev tool with form and query both?

I try to use both query and form dev tools in same time but it is overlap. How to use both? 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <TanStackDevtools plugins={[FormDevtoolsPlugin()]} />
      <ReactQueryDevtools initialIsOpen={false} />
      <App />
    </QueryClientProvider>
  </StrictMode>
);
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <TanStackDevtools plugins={[FormDevtoolsPlugin()]} />
      <ReactQueryDevtools initialIsOpen={false} />
      <App />
    </QueryClientProvider>
  </StrictMode>
);
2 Replies
vicious-gold
vicious-gold•2w ago
Tanstack Devtools allow custom plugins to be added. You can check out the TanStack Start Devtools eample
React TanStack Devtools Start Example | TanStack Devtools Docs
An example showing how to implement Start in React using TanStack Devtools.
correct-apricot
correct-apricotOP•2w ago
I got this error 
Uncaught TypeError: Cannot read properties of null (reading '__store')
    at useRouterState (chunk-MXNDX3WL.js?v=c2b6f5f2:249:26)
    at TanStackRouterDevtoolsPanel (@tanstack_react-rout…js?v=34a998e8:99:29)
    at Object.react_stack_bottom_frame (react-dom_client.js?v=5e8ae9be:18509:20)
    at renderWithHooks (react-dom_client.js?v=5e8ae9be:5654:24)
    at updateFunctionComponent (react-dom_client.js?v=5e8ae9be:7475:21)
    at beginWork (react-dom_client.js?v=5e8ae9be:8525:20)
    at runWithFiberInDEV (react-dom_client.js?v=5e8ae9be:997:72)
    at performUnitOfWork (react-dom_client.js?v=5e8ae9be:12561:98)
    at workLoopSync (react-dom_client.js?v=5e8ae9be:12424:43)
    at renderRootSync (react-dom_client.js?v=5e8ae9be:12408:13)
<TanStackRouterDevtoolsPanel>        
(anonymous)    @    main.tsx:32
Uncaught TypeError: Cannot read properties of null (reading '__store')
    at useRouterState (chunk-MXNDX3WL.js?v=c2b6f5f2:249:26)
    at TanStackRouterDevtoolsPanel (@tanstack_react-rout…js?v=34a998e8:99:29)
    at Object.react_stack_bottom_frame (react-dom_client.js?v=5e8ae9be:18509:20)
    at renderWithHooks (react-dom_client.js?v=5e8ae9be:5654:24)
    at updateFunctionComponent (react-dom_client.js?v=5e8ae9be:7475:21)
    at beginWork (react-dom_client.js?v=5e8ae9be:8525:20)
    at runWithFiberInDEV (react-dom_client.js?v=5e8ae9be:997:72)
    at performUnitOfWork (react-dom_client.js?v=5e8ae9be:12561:98)
    at workLoopSync (react-dom_client.js?v=5e8ae9be:12424:43)
    at renderRootSync (react-dom_client.js?v=5e8ae9be:12408:13)
<TanStackRouterDevtoolsPanel>        
(anonymous)    @    main.tsx:32
My code: 
<TanStackDevtools
        eventBusConfig={{ debug: true, connectToServerBus: true }}
        config={{ hideUntilHover: true }}
        plugins={[
          { name: "Form", render: <FormDevtools />, defaultOpen: true },
          { name: "Router", render: <TanStackRouterDevtoolsPanel /> },
          { name: "Query", render: <ReactQueryDevtoolsPanel /> },
        ]}
      />
<TanStackDevtools
        eventBusConfig={{ debug: true, connectToServerBus: true }}
        config={{ hideUntilHover: true }}
        plugins={[
          { name: "Form", render: <FormDevtools />, defaultOpen: true },
          { name: "Router", render: <TanStackRouterDevtoolsPanel /> },
          { name: "Query", render: <ReactQueryDevtoolsPanel /> },
        ]}
      />
Above error comes when I add Router panel. Screen get black when open that panel. Also how to add vite plugin to this? it is come with vitetools and can not add as render.

Did you find this page helpful?