CODEWITHSUNDEEP
next.jsenvironment-variablestrpc.iot3
Ygbh
Ygbh

Reputation: 183

T3 App `āŒ Invalid environment variables:`

I'm using the T3-app (nextjs, tRPC, etc), and I don't know if these env variable errors just happened, or if I haven't noticed them before. However, I have all of the environment variables set in the .env file and have the following configuration set in the 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(
        // This makes Vercel deployments not fail if you don't set NEXTAUTH_URL
        // Since NextAuth automatically uses the VERCEL_URL if present.
        (str) => process.env.VERCEL_URL ?? str,
        // VERCEL_URL doesnt include `https` so it cant be validated as a URL
        process.env.VERCEL ? z.string() : z.string().url(),
    ),
    GOOGLE_CLIENT_ID: z.string(),
    GOOGLE_CLIENT_SECRET: z.string(),
    STRIPE_SECRET_KEY: z.string(),
});

export const serverEnv = {
    DATABASE_URL: process.env.DATABASE_URL,
    NODE_ENV: process.env.NODE_ENV,
    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
    GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
};

However, the process.env object is undefined. The only one that has a value is NODE_ENV but it isn't any different than the rest of the env variables.

I'm pretty lost on why this is happening. I've looked up this problem, but nothing is coming up. Am I doing something incorrectly?

The env var errors

Upvotes: 9

Views: 6547

Answers (5)

ahchoo
ahchoo

Reputation: 11

For anyone using turbo (v2.0+) and getting this error when trying to deploy to Vercel, it's possible you need to declare your server env variables in your turbo.json in either globalEnv or env. For example:

{
  "$schema": "https://turborepo.org/schema.json",
  "globalEnv": [
    "NODE_ENV",
    "RESEND_API_KEY",
    "UNSPLASH_SECRET",
    "UPLOADTHING_SECRET",
    "UPLOADTHING_APP_ID",
    "SUPABASE_SERVICE_ROLE",
    "GOOGLE_AI_API_KEY",
    "UPSTASH_REDIS_REST_URL",
    "UPSTASH_REDIS_REST_TOKEN"
  ],
...

source: https://github.com/t3-oss/t3-env/issues/249

Upvotes: 0

Saad Bukhari
Saad Bukhari

Reputation: 11

you have to make sure env has been loaded for that

import { config as dotEnvConfig } from 'dotenv';
dotEnvConfig();

then just create the enviromnent

const env = createEnv({
  clientPrefix :"NEXT_PUBLIC_",
  server: {
    HOST: z.string().url(),
    DB_URL: z.string().url(),
    NODE_ENV: z.enum(["production", "development"]),
    AUTH_SECRET: z.string(),
    GITHUB_CLIENT_ID: z.string(),
     .....,
     runtimeEnv : process.env, // better option would be to manually type
    }

Upvotes: 0

akmalmzamri
akmalmzamri

Reputation: 1488

In my case, this happened because I forgot to add a new client env into the experimental__runtimeEnv

export const env = createEnv({
  server: {
    // your server env
  },
  client: {
    NEXT_PUBLIC_SOME_KEYS: z.string().min(1)
  },
  experimental__runtimeEnv: {
    NEXT_PUBLIC_SOME_KEYS: process.env.NEXT_PUBLIC_SOME_KEYS
  }
})

This is mentioned in the docs

Due to how Next.js bundles environment variables on Edge and Client,
we need to manually destructure them to make sure all are included in bundle.

šŸ’” You'll get type errors if not all variables from `server` & `client` are included here.

Though For Next.js >= 13.4.4, you only need to destructure client variables (as shown in my example)

Upvotes: 0

sanjarcode
sanjarcode

Reputation: 570

If the error is like this

āŒ Invalid environment variables: {
  DISCORD_CLIENT_ID: [ 'Required' ],
  DISCORD_CLIENT_SECRET: [ 'Required' ]
}

and you're trying out T3. The fix is:

  1. Make sure your Node version is >= 18. To check run node -v.
  2. During the app creation prompt, select "None" for the "What authentication provider would you like to use?" question

Upvotes: 1

Jacob
Jacob

Reputation: 748

I am one of the early maintainers and idea people for T3 & Ct3A

So the beating heart of Create T3 App, is NextJS, this is likely just a small issue with how you are implementing the .env not aligning with how NextJS is expecting the file.

For a local dev environment the env file should be -> .env.local for more details on how to do environment variables and file structure here are the NextJS docs relevant to this problem.

Upvotes: 1

Related Questions