Theo's Typesafe Cult•16mo 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•16mo ago

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

westlawOP•16mo ago

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

cadams•16mo ago

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

dan•16mo 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•16mo 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•16mo 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•8mo 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