bazeso
bazeso13mo 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(),
}
}
No description
7 Replies
Lucas
Lucas13mo 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
bazeso13mo ago
ho ok I see, maybe it can be related to Node 18 with the browser-compatible APIs or something like that ?
Lucas
Lucas13mo 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
bazeso13mo ago
Yeah, i was reading it in the source code just now, will do some logging tomorrow to see what happened
Lucas
Lucas13mo 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
bazeso13mo ago
Thanks for the hint, I will dig deeper tomorrow and give news here so it can be documented perhaps
iamgideonidoko
iamgideonidoko10mo 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(),
},
};
};