#How to use dev tool with form and query both?

5 messages · Page 1 of 1 (latest)

oblique galleon
#

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>
);```
valid bone
oblique galleon
#

I got this error

    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 /> },
        ]}
      />```
#

Above error comes when I add Router panel. Screen get black when open that panel.