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

and

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

true

true

in my tRPC client, but after setting it back to

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>;
};

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

Environment:
- bun 1.0.2
- next 13.4.16
- trpc 10.37.1

I am creating an app with

next-intl

next-intl

and

next-themes

next-themes

ssr

ssr

true

true

in my tRPC client, but after setting it back to

false

false

"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

tRPC queries running on the server

Similar Threads

Similar Threads

Similar Threads