T
tRPC

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

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

Bbazeso5/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(),
}
}
No description
LLucas5/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, })
Bbazeso5/6/2023
ho ok I see, maybe it can be related to Node 18 with the browser-compatible APIs or something like that ?
LLucas5/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
Bbazeso5/6/2023
Yeah, i was reading it in the source code just now, will do some logging tomorrow to see what happened
LLucas5/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.
Bbazeso5/6/2023
Thanks for the hint, I will dig deeper tomorrow and give news here so it can be documented perhaps
Iiamgideonidoko8/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!

T
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, httpBatchLiGet tRPC procedure latency?Hi all, is there a supported mechanism to run common code to all procedures, say if I want to get laDoes 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 followcreateTRPCNext 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 aCan 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 localTRPC type checking during build failsEnvironment: node 18.6.0, yarn Whats wrong: Type checking at build time fails. . I think this mightcreateTRPCNext 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 cStandalone Next.js 13.3.2 errorHi, since the 13.3.2 update of Next.js, I have the following error : ``` TypeError: Cannot read proDoes 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 sTypeScript, 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 becaTRPC ratelimiting endpointsI am currently having some problems with a race condition in my TRPC nextJS api. Essentially what i