Weldawadyathink•3w ago

"Invalid Hook Call" with minimal example

I am getting react invalid hook call errors when trying to add the tRPC react query integration to a project. I am still scaffolding the project, so it isn't much more complicated than a minimal example. The only weird thing I am doing is trying to use deno. I started with one of the vite react templates (I think it was a deno based template, but it was based on deno v1 so I had to make a few small adjustments). It has a barebones hono server hosting tRPC with an adapter. All I am trying to do right now is follow the guide for adding the trpc and react query providers to App.tsx.

import "./App.css";
import { TestModule } from "./TestModule.tsx";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useState } from "react";
import { trpc } from "./utils/trpc.ts";

function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: "http://localhost:3000/trpc",
        }),
      ],
    })
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <TestModule />
      </QueryClientProvider>
    </trpc.Provider>
  );
}

export default App;

import "./App.css";
import { TestModule } from "./TestModule.tsx";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useState } from "react";
import { trpc } from "./utils/trpc.ts";

function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: "http://localhost:3000/trpc",
        }),
      ],
    })
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <TestModule />
      </QueryClientProvider>
    </trpc.Provider>
  );
}

export default App;

1 Reply

WeldawadyathinkOP•2w ago

I get 2x react invalid hook call errors. I presume this is from the queryClient and trpcClient respectively. If I include the hooks and don't use the components in the JSX, I don't get those errors. I also get a TypeError: null is not an object (evaluating 'dispatcher.useEffect'). I think this might be the real cause of my issues, but I don't use useEffect anywhere in the code yet (is it internal to trpc or react query?). I also get a defaultOnUncaughtError warning recommending adding an error boundary for QueryClientProvider. I get the same symptoms on tRPC v10 and v11. Based on all that info, I think: 1. I somehow got multiple versions of react in my codebase, but I have no idea how. Deno is using the node_modules directory, and I have confirmed only 1 copy of react, and tried multiple deletions of node_modules and reinstalls. 2. Somehow something I am doing is causing tRPC or react query to use hooks incorrectly and spark the Invalid Hook Call react error. I think this is extremely unlikely, since I doubt those programmers would use react incorrectly and I would be the only one with this issue. 3. I am doing something wrong with QueryClientProvider. I have no idea what I could be doing wrong since I follow the examples exactly. I appreciate any help or insight y'all might have. Should I assume nobody has any idea why this problem is happening? I would love any ideas, even if it is just a shove in the right direction, or ideas that I might need to research. For future readers, it seems like the issue was the react speedy web compiler. As soon as I switched to the default vite react plugin, it worked.

"Invalid Hook Call" with minimal example

Did you find this page helpful?