❌ Attempted to access a server-side environment variable on the client get's thrown in db.ts

Hi, I get a weird error in my nextjs application created with create-t3-app. It throws an error that a server-side environment variable get's accessed clientside in db.ts even tho db. should never be executed clientside. This is my env.mjs:
import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";

export const env = createEnv({
server: {
DATABASE_URL: z
.string()
.url()
.refine(
(str) => !str.includes("YOUR_MYSQL_URL_HERE"),
"You forgot to change the default URL"
),
NODE_ENV: z
.enum(["development", "test", "production"])
.default("development"),
NEXTAUTH_SECRET: z.string().min(1),
NEXTAUTH_URL: z.preprocess(
(str) => process.env.VERCEL_URL ?? str,
process.env.VERCEL ? z.string().min(1) : z.string().url()
),
},
client: {},
runtimeEnv: {
DATABASE_URL: process.env.DATABASE_URL,
NODE_ENV: process.env.NODE_ENV,
NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
NEXTAUTH_URL: process.env.NEXTAUTH_URL,
},
skipValidation: !!process.env.SKIP_ENV_VALIDATION,
});
import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";

export const env = createEnv({
server: {
DATABASE_URL: z
.string()
.url()
.refine(
(str) => !str.includes("YOUR_MYSQL_URL_HERE"),
"You forgot to change the default URL"
),
NODE_ENV: z
.enum(["development", "test", "production"])
.default("development"),
NEXTAUTH_SECRET: z.string().min(1),
NEXTAUTH_URL: z.preprocess(
(str) => process.env.VERCEL_URL ?? str,
process.env.VERCEL ? z.string().min(1) : z.string().url()
),
},
client: {},
runtimeEnv: {
DATABASE_URL: process.env.DATABASE_URL,
NODE_ENV: process.env.NODE_ENV,
NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
NEXTAUTH_URL: process.env.NEXTAUTH_URL,
},
skipValidation: !!process.env.SKIP_ENV_VALIDATION,
});
No description
7 Replies
dan
dan14mo ago
You're most likely importing and using something on the client side by mistake. Check for all places that import db
westlaw
westlaw14mo ago
That was the problem. I created a Schema in one of the TRPC Routers and imported it client side
cadams
cadams14mo ago
Is it possible to define a "shape" once and use it for both TRPC Router and client ?
dan
dan14mo ago
You export the tRPC router type and use that on the client. Thats how tRPC is setup If you want the type for a specific route use the route helpers
dan
dan14mo ago
Inferring Types | tRPC
It is often useful to access the types of your API within your clients. For this purpose, you are able to infer the types contained in your AppRouter.
cje
cje14mo ago
importing schema clientside is ok they just cant be in the same file as "actual server code" personally if i need to share schema, i break the file into someRouter.ts and someRouter.schema.ts you can put them anywhere of course, but next to the router makes the most sense to me personally
RecklessClam
RecklessClam7mo ago
using process.env instead of importing the env object worked for me
Want results from more Discord servers?
Add your server