You're trying to use @trpc/server in a non-server environment

Bbazeso

5/5/2023

Environment: Node v18.15.0, yarn, Next 13.2.4 What's wrong: When using createServerSideHelpers, i got this error:

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

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

I'm within a monorepo btw. Within the screenshot, we can see data that are prefetched within getStaticProps get rendered correctly on the page (within the pink arrow) Code ⬇️ packages/my-trpc-package/ssrHelpers.ts

import { createServerSideHelpers } from '@trpc/react-query/server';

import { ottAppRouter } from './server';

export const ssrHelpers = () => createServerSideHelpers({
    router: ottAppRouter,
    ctx: {
      // doing my stuf here...
    },
  });

import { createServerSideHelpers } from '@trpc/react-query/server';

import { ottAppRouter } from './server';

export const ssrHelpers = () => createServerSideHelpers({
    router: ottAppRouter,
    ctx: {
      // doing my stuf here...
    },
  });

apps/foo/src/pages/index.tsx

export const getStaticProps = (ctx: GetStaticPropsContext) => {
    const helpers = ssrHelpers();
    await helpers.legacy.getWebConfig.prefetch({
      language: 'en',
    });

    return {
      props: {
        trpcState: helpers.dehydrate(),
      }
    }

export const getStaticProps = (ctx: GetStaticPropsContext) => {
    const helpers = ssrHelpers();
    await helpers.legacy.getWebConfig.prefetch({
      language: 'en',
    });

    return {
      props: {
        trpcState: helpers.dehydrate(),
      }
    }

LLucas

5/6/2023

trpc is probably detecting somehow typeof window !== 'undefined' a quick fix you could implement is creating the router with these flags

const t = initTRPC.create({
  isServer: true,
  // OTHER SOLUTION MIGHT BE TO USE THE FOLLOWING:
  allowOutsideOfServer: true,
})

Bbazeso

5/6/2023

ho ok I see, maybe it can be related to Node 18 with the browser-compatible APIs or something like that ?

LLucas

5/6/2023

I don't think so. Here are the properties that trpc checks to see if it is being executed on the server

/**
 * The default check to see if we're in a server
 */
export const isServerDefault: boolean =
  typeof window === 'undefined' ||
  'Deno' in window ||
  globalThis.process?.env?.NODE_ENV === 'test' ||
  !!globalThis.process?.env?.JEST_WORKER_ID ||
  !!globalThis.process?.env?.VITEST_WORKER_ID;

maybe you could check with a console log

Bbazeso

5/6/2023

Yeah, i was reading it in the source code just now, will do some logging tomorrow to see what happened

LLucas

5/6/2023

One possibility is another package is defining something on window and its leaking, which would be super weird. But nonetheless it is a really weird behavior for sure.

Bbazeso

5/6/2023

Thanks for the hint, I will dig deeper tomorrow and give news here so it can be documented perhaps

Iiamgideonidoko

8/24/2023

getServerSideProps never runs in the browser so you can resolve this error by dynamically importing the server-side helpers in the getServerSideProps from a ssr.ts file in your server directory for example. See below:

export const getServerSideProps: GetServerSideProps = async () => {
  const { ssrHelpers } = await import('@/server/ssr');
  // ...
  return {
    props: {
      trpcState: ssrHelpers.dehydrate(),
    },
  };
};

export const getServerSideProps: GetServerSideProps = async () => {
  const { ssrHelpers } = await import('@/server/ssr');
  // ...
  return {
    props: {
      trpcState: ssrHelpers.dehydrate(),
    },
  };
};

Looking for more? Join the community!

tRPC

You're trying to use @trpc/server in a non-server environment

Join Server

tRPC

You're trying to use @trpc/server in a non-server environment

Join Server

Recommended Posts

TRPC Middleware w/ InputHello! I was wondering if there is a way to add input fields onto a TRPC middleware. Essentially I Server side headers are not appliedHi guys I have the following trpc client initialized ``` import { createTRPCProxyClient, httpBatchLi Get tRPC procedure latency?Hi all, is there a supported mechanism to run common code to all procedures, say if I want to get la Does or will trpc support http event stream?Does or will trpc support http event stream?Can't get wsLink's retryDelayMs to workI'm trying to add some backoff for when connecting to my websocket server fails. I've got the follow createTRPCNext and createTRPCProxyClient within one NextJs appHey, Is there any possibility to use createTRPCNext and createTRPCProxyClient clients in one NextJs Calling axios requests not workingIf i call an API using axios in trpc query procedure It works if the url is https it dont if url is Best practices in naming and defining procedures when they don't fit into standard buckets?I am loving TRPC and its type safety, but I feel like I'm struggling with the naming of procedures. Separating routers into their own modules and merging them causes "any" type in clientHi all, I've separated my router into multiple files, but when merging them I get `any` types for a Can i use try/catch in procedures?can i use try/catch in procedures to pass the error when catching errors in my functions?custom query functionI have a use case where I need a trpc procedure call when a specific key is not present in the local TRPC type checking during build failsEnvironment: node 18.6.0, yarn Whats wrong: Type checking at build time fails. . I think this might createTRPCNext config ctx always returns undefined.Hi Everyone. So I'm trying to use TRPC and Nextjs for auth and post query etc. I have client side c Standalone Next.js 13.3.2 errorHi, since the 13.3.2 update of Next.js, I have the following error : ``` TypeError: Cannot read pro Does tRPC works in application network layer (HTTP) or transport network layer (TCP, UDP)?Just wondering if tRPC uses TCP under the hood.returning undefined from server gets stripped on the clientI encounter this issue when working with TRPC React under a Turborepo. But I works fine on Next I s TypeScript, Mono-Repositories and Internal Packages / Project ReferencesI am getting quite frustrate with project references / internal projects and the resolving of types how to integrate with Redis (ioredis)Any middleware?Help to deploy my TRPC proj from a monorepo (turborepo) at VercelI'm trying to learn monorepo with TRPC, both are new for me and Im kind struggling to deploy it beca TRPC ratelimiting endpointsI am currently having some problems with a race condition in my TRPC nextJS api. Essentially what i