Theo's Typesafe Cult•3y ago

invalid environment variables

Hey all. I'm using create t3 app but having some difficulties with custom environment variables. The .env type safe code is messing me up. I am trying to add NEXT_PUBLIC_CLIENT_INVITE_URL to my .env file, I have added this env to my schema.mjs file:

export const serverSchema = z.object({
  DATABASE_URL: z.string().url(),
  NODE_ENV: z.enum(["development", "test", "production"]),
  NEXTAUTH_SECRET: z.string(),
  NEXTAUTH_URL: z.preprocess(
    (str) => process.env.VERCEL_URL ?? str,
    process.env.VERCEL ? z.string() : z.string().url(),
  ),
  DISCORD_CLIENT_ID: z.string(),
  DISCORD_CLIENT_SECRET: z.string(),
});

export const clientSchema = z.object({
  // NEXT_PUBLIC_BAR: z.string(),
  NEXT_PUBLIC_CLIENT_INVITE_URL: z.string(),
});

export const clientEnv = {
  // NEXT_PUBLIC_BAR: process.env.NEXT_PUBLIC_BAR,
  NEXT_PUBLIC_CLIENT_INVITE_URL: process.env.NEXT_PUBLIC_CLIENT_INVITE_URL,
};

export const serverSchema = z.object({
  DATABASE_URL: z.string().url(),
  NODE_ENV: z.enum(["development", "test", "production"]),
  NEXTAUTH_SECRET: z.string(),
  NEXTAUTH_URL: z.preprocess(
    (str) => process.env.VERCEL_URL ?? str,
    process.env.VERCEL ? z.string() : z.string().url(),
  ),
  DISCORD_CLIENT_ID: z.string(),
  DISCORD_CLIENT_SECRET: z.string(),
});

export const clientSchema = z.object({
  // NEXT_PUBLIC_BAR: z.string(),
  NEXT_PUBLIC_CLIENT_INVITE_URL: z.string(),
});

export const clientEnv = {
  // NEXT_PUBLIC_BAR: process.env.NEXT_PUBLIC_BAR,
  NEXT_PUBLIC_CLIENT_INVITE_URL: process.env.NEXT_PUBLIC_CLIENT_INVITE_URL,
};

However, I still get an error which I am unsure how to fix. I'm not sure what else I need to add? My .env looks like:

# When adding additional env variables, the schema in /env/schema.mjs should be updated accordingly

# Prisma
DATABASE_URL=""

# Next Auth
NEXTAUTH_SECRET=""
NEXTAUTH_URL=""

# Next Auth Discord Provider
DISCORD_CLIENT_ID=""
DISCORD_CLIENT_SECRET=""
NEXT_PUBLIC_CLIENT_INVITE_URL=""

# When adding additional env variables, the schema in /env/schema.mjs should be updated accordingly

# Prisma
DATABASE_URL=""

# Next Auth
NEXTAUTH_SECRET=""
NEXTAUTH_URL=""

# Next Auth Discord Provider
DISCORD_CLIENT_ID=""
DISCORD_CLIENT_SECRET=""
NEXT_PUBLIC_CLIENT_INVITE_URL=""

18 Replies

Pod•3y ago

Dumb question, are both the schema and .env saved? 🙃

rustclanOP•3y ago

Yep they are, and I have reran yarn dev and my .env is also saved

Pod•3y ago

And that var isn't just an empty string right

rustclanOP•3y ago

correct, it has contents. It is a url example:

NEXT_PUBLIC_CLIENT_INVITE_URL="https://discord.com/api/oauth2/authorize"

NEXT_PUBLIC_CLIENT_INVITE_URL="https://discord.com/api/oauth2/authorize"

Pod•3y ago

🤔 I'm perplexed

rustclanOP•3y ago

me too! 😛

Pod•3y ago

It seems like its the server env erroring Sometimes a database_url won't satisfy zod url If it's something like postgresql://

rustclanOP•3y ago

hmm. My database env is:

DATABASE_URL="mysql://root@localhost:3306/aio"

DATABASE_URL="mysql://root@localhost:3306/aio"

Pod•3y ago

Yeah remove the url condition and that should fix it Oh wait nvm my project actually is working with that, I'm thinking of using sqlite

rustclanOP•3y ago

Nope! Unfortunately still the same.

Pod•3y ago

NEXTAUTH_URL is a valid url?

rustclanOP•3y ago

# Next Auth
NEXTAUTH_SECRET="..."
NEXTAUTH_URL="http://localhost:3000"

# Next Auth
NEXTAUTH_SECRET="..."
NEXTAUTH_URL="http://localhost:3000"

Pod•3y ago

Are you by chance trying to use server env in a client area?

rustclanOP•3y ago

Not that I know of. I'm trying to use env.NEXT_PUBLIC_CLIENT_INVITE_URL in a component. But this is a client env as far as I know. ill try comment this out see if that resolves it. Alright yea, that resolves it.

Pod•3y ago

Make sure its being imported from client 👍

rustclanOP•3y ago

Thanks! That fixes it. Sorry for that mistake 🙂

Pod•3y ago

Np, sorry for my scatter brain lmao

rustclanOP•3y ago

Np. I appreciate the help 🙂 You have saved me many hours

Gaming

Programming

invalid environment variables