Theo's Typesafe Cult•9mo ago

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

7 Replies

dan•9mo ago

You're most likely importing and using something on the client side by mistake. Check for all places that import db

westlaw•9mo ago

That was the problem. I created a Schema in one of the TRPC Routers and imported it client side

cadams•9mo ago

Is it possible to define a "shape" once and use it for both TRPC Router and client ?

dan•9mo 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•9mo ago

https://trpc.io/docs/client/vanilla/infer-types

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•9mo 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•2mo ago

using process.env instead of importing the env object worked for me

Gaming

Programming

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