Error: You're trying to use @trpc/server in a non-server environment. This is not supported by default.

[sbkl]

Hi,

Trying to implement tRPC on my existing Next.js 13 project and can't figure out why I'm getting this error. Followed the nextjs guide from the docs and also used create-t3-turbo implementation. Also tried to google the error. But no luck.

Then I tried with a brand new Nextjs 13 project as I was thinking something with my existing project might be wrong and same result. So I must be missing something on the implementation. Here is the reproduction repo: trpc-test

pnpm install
change .env.example to .env where the postgres DATABASE_URL for prisma is available. Change the variable as necessary.
pnpm prisma generate
pnpm prisma db push
pnpm dev

This repo has no src folder structure. Tried another version with src folder but got the same result.

Would appreciate guidance on how to solve this. Thank you.

[sbkl]

The issue was with the transformer variable with superjson being exported use to init tRPC. Importing and using directly superjson solved the issue.

[ben-xD]

In my case, I still needed to export my appRouter because I was using it 2 places: one in an astro page, and another in a build step (astro.config.mjs) to generate the trpc-panel. I could not remove export from my trpc file.

On the trpc client file, I needed to switch from

import { AppRouter } from './trpc';

to

import type { AppRouter } from './trpc';

For example,

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './trpc';
import { trpcApiPath } from './trpcPath';

export const createTrpcClient = (serverUrl: string) => createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: `${serverUrl}${trpcApiPath}`,
    }),
  ],
});

[hedior03]

Environment: Astro with React Islands, trpc and drizzle-orm
Objective: Implement tRPC using the setup instructions from the tRPC Documentation.

Issue Encountered: After following the setup guide and implementing tRPC in my project, I encountered the following error:

Error: You're trying to use @trpc/server in a non-server environment. This is not supported by default

Original implementation:

import { createTRPCReact } from "@trpc/react-query";
import { type RootRouter } from "@lib/trpc/router"; // This import was causing the issue

export const trpcReact = createTRPCReact<RootRouter>();

Solution:

import type { RootRouter } from "@lib/trpc/router"; // Fixed import statement

Outcome: Changing the import statement to explicitly indicate a type-only import solved the problem.

I hope this helps anyone facing a similar issue with setting up tRPC in an Astro project with React Islands. If it is a potential issue, I'm happy to help and provide more information

[KATT]

I think this would help you https://typescript-eslint.io/rules/consistent-type-imports/