Theo's Typesafe CultTTC
Theo's Typesafe Cult•12mo ago•
11 replies
Camuise

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(),
  },
  // ...
});

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

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
Was this page helpful?
CommunitiesDocsAboutTermsPrivacy