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

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.

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...
    },
  });

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(),
      }
    }

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, })

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

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

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

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.

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

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(),
    },
  };
};