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.

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

Ssacul

5/6/2023

trpc is probably detecting somehow typeof window !== 'undefined'

Ssacul

5/6/2023

a quick fix you could implement is creating the router with these flags

Ssacul

5/6/2023

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 ?

Ssacul

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

Ssacul

5/6/2023

/**
 * 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;

Ssacul

5/6/2023

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

Ssacul

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