Theo's Typesafe Cult•2y ago

env Variables causing issue deploying to Vercel

Howdy! So I'm trying to host my CT3A on vercel. The build is failing, looks like it's the env variables that are causing the issue but I'm not sure what I'm doing wrong. I double checked that my schema.mjs file isn't missing any variables, and I actually did miss one, so I figured sure that must be it, but even after adding it to the repo, the build is failing for the same reason. This is my schema.mjs

export const serverSchema = z.object({
  DATABASE_URL: z.string().url(),
  NEXT_PUBLIC_ADMIN_PASSWORD: z.string(),
  NODE_ENV: z.enum(["development", "test", "production"]),
});

export const serverSchema = z.object({
  DATABASE_URL: z.string().url(),
  NEXT_PUBLIC_ADMIN_PASSWORD: z.string(),
  NODE_ENV: z.enum(["development", "test", "production"]),
});

And my build error is attached. I tried adding the NODE_ENV even though it's my understanding I shouldn't need to add that, it's inferred by default, still the same error. Any ideas?

7 Replies

Shoodey•2y ago

hey, maybe try without quotes first? not sure what else it could be

BenOP•2y ago

just tried no quotes, no luck sadCat

Shoodey•2y ago

sorry i was a bit distracted and i missed the error, you need to split your schema into 2: server and client

export const serverSchema = z.object({
 NODE_ENV: z.enum(["development", "test", "production"]),
  DATABASE_URL: z.string().url(),
});

export const serverSchema = z.object({
 NODE_ENV: z.enum(["development", "test", "production"]),
  DATABASE_URL: z.string().url(),
});

and then use

export const clientSchema = z.object({
  NEXT_PUBLIC_ADMIN_PASSWORD: z.string(),
});
export const clientEnv = {
  NEXT_PUBLIC_ADMIN_PASSWORD: process.env.NEXT_PUBLIC_DISCORD_CLIENT_ID,
};

export const clientSchema = z.object({
  NEXT_PUBLIC_ADMIN_PASSWORD: z.string(),
});
export const clientEnv = {
  NEXT_PUBLIC_ADMIN_PASSWORD: process.env.NEXT_PUBLIC_DISCORD_CLIENT_ID,
};

since NEXT_PUBLIC_ prefixed environment variable are client side ones not server

BenOP•2y ago

So is the NEXT_PUBLIC going to need to live in a separate .env file then? And when I add the env variables to vercel, am I going to need to differentiate them at all? Thanks for the help btw!

Shoodey•2y ago

a single .env file is enough, just make sure to prefix environment variable that are used inside you pages/components with NEXT_PUBLIC_ and also separate them within your schema.mjs file

BenOP•2y ago

Ok ya I finally managed to get it working by putting the NEXT_PUBLIC_ADMIN into the clientSchema, thanks for the catch! So any schema that I'm using client side needs to live in the cleintEnv I'm guessing?

Shoodey•2y ago

exactly, when you have to use a new var, it always goes in the same .env, but then you check if it's used by a page/component and make sure it is BOTH prefixed with NEXT_PUBLIC and inside your clientSchema. But if it a server env, just it goes in the server schema this separation is used because if you mess up, your pages/components cannot read server env and will cause hydration errors

Gaming

Programming

env Variables causing issue deploying to Vercel