eastern-cyan

Problem integrating T3 env in my app.

Hi, I am using tanstack start for first time and was trying to create a template for myself. I was facing problem integrating https://env.t3.gg/docs/core in my app. env.ts

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

export const env = createEnv({
  server: {
    TEST: z.string(),
  },
  clientPrefix: "VITE_",
  client: {
    VITE_TEST: z.string(),
  },
  runtimeEnv: process.env, // or import.meta.env or something else 
  emptyStringAsUndefined: true,
});

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

export const env = createEnv({
  server: {
    TEST: z.string(),
  },
  clientPrefix: "VITE_",
  client: {
    VITE_TEST: z.string(),
  },
  runtimeEnv: process.env, // or import.meta.env or something else 
  emptyStringAsUndefined: true,
});

If I use process.env I am able to use env.TEST but env.VITE_TEST shows error. If I use import.meta.env I get env.VITE_TEST but env.TEST shows error. What am I doing wrong.

Env

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

27 Replies

other-emerald•7mo ago

for your client runtimeEnv: import.meta.env for your server runtimeEnv: process.env

flat-fuchsia•7mo ago

@Ryan & @Mukund sorry to jump on this thread, I had one more question, where should we Validate schema on build. I presume in app.config.ts but when I tried it, import.meta.env is undefined (I think Vite doesn't load env in configuration file). Is there any other way to validate env during build?

other-emerald•7mo ago

this is what I do in app.config.ts

// validate env variables on build
import "./app/env/client";
import "./app/env/server";

export default defineConfig({
  server: {

// validate env variables on build
import "./app/env/client";
import "./app/env/server";

export default defineConfig({
  server: {

flat-fuchsia•7mo ago

But import.meta.env in app.config.ts is undefined

import { defineConfig } from "@tanstack/start/config";
import tsConfigPaths from "vite-tsconfig-paths";

console.log("import.meta.env", import.meta.env);
export default defineConfig({
  tsr: {
    appDirectory: "src/app",
  },
  vite: {
    envPrefix: "PUBLIC_",
    plugins: [
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),

    ],
  },
});

import { defineConfig } from "@tanstack/start/config";
import tsConfigPaths from "vite-tsconfig-paths";

console.log("import.meta.env", import.meta.env);
export default defineConfig({
  tsr: {
    appDirectory: "src/app",
  },
  vite: {
    envPrefix: "PUBLIC_",
    plugins: [
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),

    ],
  },
});

eastern-cyanOP•7mo ago

This looks good I'll try it Thanks, This worked as expected Yes, I am facing the same problem now

eastern-cyanOP•7mo ago

Also if I import these files, when I run dev server I am getting weird files everytime I run the server maybe it has something to do with my tsconfig not sure tho. Github Repo: https://github.com/mukund1606/tanstack-app

GitHub

GitHub - mukund1606/tanstack-app

Contribute to mukund1606/tanstack-app development by creating an account on GitHub.

eastern-cyanOP•7mo ago

Not only import.meta.env, process.env variable is also undefined. Not sure how to validate the schema on dev or build

fascinating-indigo•5mo ago

did you manage to figure this out, im having the same issues so by importing like this import "./env.ts"; seems to work, it still generates the timestamp file. but now its not detecting my env variables in my actual .env file.

{
    expected: "'development' | 'test' | 'production'",
    received: 'undefined',
    code: 'invalid_type',
    path: [ 'NODE_ENV' ],
    message: 'Required'
  }

{
    expected: "'development' | 'test' | 'production'",
    received: 'undefined',
    code: 'invalid_type',
    path: [ 'NODE_ENV' ],
    message: 'Required'
  }

//.env
NODE_ENV=development

//.env
NODE_ENV=development

eastern-cyanOP•5mo ago

I created a script to check env that runs before dev and builds using predev and prebuild commands. Only down side is if I have to add new env variable for it's validation I have to rerun the command. This is my implementation check-env.ts

import "~/env";

import "~/env";

package.json scripts

  "scripts": {
    "dev": "bun with-env vinxi dev",
    "predev": "bun check-env",
    "build": "bun vinxi build",
    "prebuild": "bun check",
    "check-env": "bun check-env.ts",
    "with-env": "dotenv -e .env --"
  },

  "scripts": {
    "dev": "bun with-env vinxi dev",
    "predev": "bun check-env",
    "build": "bun vinxi build",
    "prebuild": "bun check",
    "check-env": "bun check-env.ts",
    "with-env": "dotenv -e .env --"
  },

maybe something related to vinxi. I'll try this after devinxi

fascinating-indigo•5mo ago

yea im getting close 😦 at least its actually running the validation now

eastern-cyanOP•5mo ago

fascinating-indigo•5mo ago

adding dotenv package and doing import "dotenv/config"; in my env.ts made it work still generates a timestamp file when it errors, if anyones knows anyway to stop that also if this is the only approach? or what is the standard for this in tanstack start also would this be the correct approach when handling dev vs prod?

env.NODE_ENV === 'development' ? env.DEV_SUPABASE_URL : env.PROD_SUPABASE_URL

env.NODE_ENV === 'development' ? env.DEV_SUPABASE_URL : env.PROD_SUPABASE_URL

bump

robust-apricot•5mo ago

why is everyone bumping these days? are you all in a hurry?

fascinating-indigo•5mo ago

sorry, when theres a lot of posts, this one gets burried down and people won't see it.

robust-apricot•5mo ago

and bumping will cause the other posts not to be seen then? sounds like a zero sum game just dont bump

fascinating-indigo•5mo ago

alright, mb. what do you recommend though when someone hasn't answered in a couple days? do a new post?

robust-apricot•5mo ago

DM?

fascinating-indigo•5mo ago

dm who

robust-apricot•5mo ago

the someone who hasnt answered? sounded like you meant someone in particular

fascinating-indigo•5mo ago

no i meant in general. i do a post asking a question and it goes unanswered for a couple days

robust-apricot•5mo ago

usualy it helps to create a new post with a complete minimal example and a concise description what's not working.

fascinating-indigo•5mo ago

whats recommended, if i shouldnt bump

robust-apricot•5mo ago

help others to help you by providing everything they need to debug your issue

fascinating-indigo•5mo ago

alright

robust-apricot•5mo ago

but in this case it was just a few hours so I dont see any reason to do anything really

genetic-orange•5mo ago

@Joey9 Did you end up finding a solution for that? I have the exact same problem as you (no import.meta.env + timestamp files being generated)

fascinating-indigo•5mo ago

no i didnt

Gaming

Programming

Problem integrating T3 env in my app.

Did you find this page helpful?