Theo's Typesafe Cult•4w ago

Unable to have a environment variable only on client?

I'm configuring the better-auth library for my app and it requires the BETTER_AUTH_URL environment variable on the client side, therefore I prefixed it as NEXT_PUBLIC_BETTER_AUTH_URL.

import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";

export const env = createEnv({
  /**
   * Specify your server-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars.
   */
  server: {
    DATABASE_URL: z.string().url(),
    NODE_ENV: z
      .enum(["development", "test", "production"])
      .default("development"),
    BETTER_AUTH_SECRET: z.string(),
    DISCORD_CLIENT_ID: z.string(),
    DISCORD_CLIENT_SECRET: z.string(),
  },

  /**
   * Specify your client-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars. To expose them to the client, prefix them with
   * `NEXT_PUBLIC_`.
   */
  client: {
    NEXT_PUBLIC_BETTER_AUTH_URL: z.string().url(),
  },
  // ...
});

import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";

export const env = createEnv({
  /**
   * Specify your server-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars.
   */
  server: {
    DATABASE_URL: z.string().url(),
    NODE_ENV: z
      .enum(["development", "test", "production"])
      .default("development"),
    BETTER_AUTH_SECRET: z.string(),
    DISCORD_CLIENT_ID: z.string(),
    DISCORD_CLIENT_SECRET: z.string(),
  },

  /**
   * Specify your client-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars. To expose them to the client, prefix them with
   * `NEXT_PUBLIC_`.
   */
  client: {
    NEXT_PUBLIC_BETTER_AUTH_URL: z.string().url(),
  },
  // ...
});

However, this causes an runtime error:

Runtime Error

Error: Invalid environment variables
------------------------------------
[project]/node_modules/@t3-oss/env-core/dist/index.js [app-client] (ecmascript)/createEnv/onValidationError<@http://localhost:3000/_next/static/chunks/node_modules_39350d._.js:14996:15
createEnv@http://localhost:3000/_next/static/chunks/node_modules_39350d._.js:15002:16
createEnv@http://localhost:3000/_next/static/chunks/node_modules_39350d._.js:15051:188
[project]/src/env.js [app-client] (ecmascript)@http://localhost:3000/_next/static/chunks/src_ae768f._.js:16:191
instantiateModule/<@http://localhost:3000/_next/static/chunks/_d95469._.js:693:27
runModuleExecutionHooks@http://localhost:3000/_next/static/chunks/_d95469._.js:738:22
instantiateModule@http://localhost:3000/_next/static/chunks/_d95469._.js:691:32
getOrInstantiateModuleFromParent@http://localhost:3000/_next/static/chunks/_d95469._.js:624:12
esmImport@http://localhost:3000/_next/static/chunks/_d95469._.js:142:52
[project]/src/lib/auth-client.ts [app-client] (ecmascript)@http://localhost:3000/_next/static/chunks/src_ae768f._.js:71:137
instantiateModule/<@http://localhost:3000/_next/static/chunks/_d95469._.js:693:27
runModuleExecutionHooks@http://localhost:3000/_next/static/chunks/_d95469._.js:738:22
instantiateModule@http://localhost:3000/_next/static/chunks/_d95469._.js:691:32
getOrInstantiateModuleFromParent@http://localhost:3000/_next/static/chunks/_d95469._.js:624:12
esmImport@http://localhost:3000/_next/static/chunks/_d95469._.js:142:52
[project]/src/app/auth/[auth]/auth-view.tsx [app-client] (ecmascript)@http://localhost:3000/_next/static/chunks/src_ae768f._.js:419:155
instantiateModule/<@http://localhost:3000/_next/static/chunks/_d95469._.js:693:27
runModuleExecutionHooks@http://localhost:3000/_next/static/chunks/_d95469._.js:738:22
instantiateModule@http://localhost:3000/_next/static/chunks/_d95469._.js:691:32
getOrInstantiateModuleFromParent@http://localhost:3000/_next/static/chunks/_d95469._.js:624:12
commonJsRequire@http://localhost:3000/_next/static/chunks/_d95469._.js:157:52
requireModule@http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_107ce8._.js:2676:50
initializeModuleChunk@http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_107ce8._.js:3218:38
resolveModuleChunk@http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_107ce8._.js:3187:43
[project]/node_modules/next/dist/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js [app-client] (ecmascript)/resolveModule/<@http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_107ce8._.js:3527:24

Runtime Error

Error: Invalid environment variables
------------------------------------
[project]/node_modules/@t3-oss/env-core/dist/index.js [app-client] (ecmascript)/createEnv/onValidationError<@http://localhost:3000/_next/static/chunks/node_modules_39350d._.js:14996:15
createEnv@http://localhost:3000/_next/static/chunks/node_modules_39350d._.js:15002:16
createEnv@http://localhost:3000/_next/static/chunks/node_modules_39350d._.js:15051:188
[project]/src/env.js [app-client] (ecmascript)@http://localhost:3000/_next/static/chunks/src_ae768f._.js:16:191
instantiateModule/<@http://localhost:3000/_next/static/chunks/_d95469._.js:693:27
runModuleExecutionHooks@http://localhost:3000/_next/static/chunks/_d95469._.js:738:22
instantiateModule@http://localhost:3000/_next/static/chunks/_d95469._.js:691:32
getOrInstantiateModuleFromParent@http://localhost:3000/_next/static/chunks/_d95469._.js:624:12
esmImport@http://localhost:3000/_next/static/chunks/_d95469._.js:142:52
[project]/src/lib/auth-client.ts [app-client] (ecmascript)@http://localhost:3000/_next/static/chunks/src_ae768f._.js:71:137
instantiateModule/<@http://localhost:3000/_next/static/chunks/_d95469._.js:693:27
runModuleExecutionHooks@http://localhost:3000/_next/static/chunks/_d95469._.js:738:22
instantiateModule@http://localhost:3000/_next/static/chunks/_d95469._.js:691:32
getOrInstantiateModuleFromParent@http://localhost:3000/_next/static/chunks/_d95469._.js:624:12
esmImport@http://localhost:3000/_next/static/chunks/_d95469._.js:142:52
[project]/src/app/auth/[auth]/auth-view.tsx [app-client] (ecmascript)@http://localhost:3000/_next/static/chunks/src_ae768f._.js:419:155
instantiateModule/<@http://localhost:3000/_next/static/chunks/_d95469._.js:693:27
runModuleExecutionHooks@http://localhost:3000/_next/static/chunks/_d95469._.js:738:22
instantiateModule@http://localhost:3000/_next/static/chunks/_d95469._.js:691:32
getOrInstantiateModuleFromParent@http://localhost:3000/_next/static/chunks/_d95469._.js:624:12
commonJsRequire@http://localhost:3000/_next/static/chunks/_d95469._.js:157:52
requireModule@http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_107ce8._.js:2676:50
initializeModuleChunk@http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_107ce8._.js:3218:38
resolveModuleChunk@http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_107ce8._.js:3187:43
[project]/node_modules/next/dist/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js [app-client] (ecmascript)/resolveModule/<@http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_107ce8._.js:3527:24

How do I fix this?

Solution:

what if you try having two env with the same value? BETTER_AUTH_URL on server and NEXT_PUBLIC_BETTER_AUTH_URL on client

Jump to solution

9 Replies

CamuiseOP•4w ago

Attempting to add the environment variable to the server errors, saying that NEXT_PUBLIC_-prefixed variables shouldn't be added to the server config

CamuiseOP•4w ago

A similar error occurs if I instead remove the NEXT_PUBLIC_ prefix from the client config

Solution

peculiarnewbie•4w ago

what if you try having two env with the same value? BETTER_AUTH_URL on server and NEXT_PUBLIC_BETTER_AUTH_URL on client

peculiarnewbie•4w ago

looks like they'll handle both

Xanacas•4w ago

Your next_public env belong into client:{} object inside of createEnv() as described here: https://github.com/t3-oss/t3-env

GitHub

GitHub - t3-oss/t3-env

Contribute to t3-oss/t3-env development by creating an account on GitHub.

CamuiseOP•4w ago

that worked for me but i was wondering if there was a way to not use 2 env with the same value

peculiarnewbie•4w ago

i haven't used t3-env but i think what you want to do is something like this?

peculiarnewbie•4w ago

https://env.t3.gg/docs/nextjs

Env

Never build your apps with invalid environment variables again. Validate and transform your environment with the full power of Zod.

CamuiseOP•4w ago

seems close enough, but i can't seem to understand what the docs are telling me to do once i have the two different schemas

Gaming

Programming

Unable to have a environment variable only on client?

Did you find this page helpful?