bazeso•15mo ago

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.

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

7 Replies

Lucas•15mo ago

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

bazeso•15mo ago

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

Lucas•15mo ago

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

bazeso•15mo ago

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

Lucas•15mo ago

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.

bazeso•15mo ago

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

ꁅꀤꀸꍟꂦꈤ•12mo ago

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