tRPC queries running on the server

Environment:
- bun 1.0.2
- next 13.4.16
- trpc 10.37.1

I am creating an app with

next-intl

next-intl

next-intl

next-intl and

next-themes

next-themes

next-themes

next-themes. I initially setup trpc, and everything was working, but after a little refactoring (including i18n and dark mode), my tRPC queries suddenly run on the server.
I tried back-tracking until I got to the basic tRPC next.js setup. The only clue I had is that I changed

ssr

ssr

ssr

ssr to

true

true

true

true in my tRPC client, but after setting it back to

false

false

false

false and clearing cache, the problem still persists. Since all I have is the basic setup, I don't think looking at my code will do any good. Maybe anyone has had this problem before?

EDIT:
While trying to force the component to run on the browser, I created this dummy component:

"use client";

import { trpc } from "@/utils/trpc";
import { useState } from "react";

export const TestApp: React.FC = () => {
  const { data } = trpc.twitch.clips.list.useQuery({ game: "Minecraft" });

  const [dummy, setDummy] = useState("");
  console.log({ dummy });
  console.log("TestApp: should run on the client");
  console.log({ clips: data });

  return <div>Test app</div>;
};

"use client";

import { trpc } from "@/utils/trpc";
import { useState } from "react";

export const TestApp: React.FC = () => {
  const { data } = trpc.twitch.clips.list.useQuery({ game: "Minecraft" });

  const [dummy, setDummy] = useState("");
  console.log({ dummy });
  console.log("TestApp: should run on the client");
  console.log({ clips: data });

  return <div>Test app</div>;
};

"use client";

import { trpc } from "@/utils/trpc";
import { useState } from "react";

export const TestApp: React.FC = () => {
  const { data } = trpc.twitch.clips.list.useQuery({ game: "Minecraft" });

  const [dummy, setDummy] = useState("");
  console.log({ dummy });
  console.log("TestApp: should run on the client");
  console.log({ clips: data });

  return <div>Test app</div>;
};

"use client";

import { trpc } from "@/utils/trpc";
import { useState } from "react";

export const TestApp: React.FC = () => {
  const { data } = trpc.twitch.clips.list.useQuery({ game: "Minecraft" });

  const [dummy, setDummy] = useState("");
  console.log({ dummy });
  console.log("TestApp: should run on the client");
  console.log({ clips: data });

  return <div>Test app</div>;
};

But the console output shows up on my backend. How is it even possible that a component with

useState

useState

runs on the server?

tRPC queries running on the server

Similar Threads

Similar Threads

Similar Threads