Start RC - Environment Variables aren't loaded automatically

[ryanagillie]

Which project does this relate to?

Start

Describe the bug

Environment variables are not automatically loaded as stated in the docs.

Your Example Website or App

https://github.com/ryanagillie/tanstack-start-rc-env-bug

Steps to Reproduce the Bug or Issue

1. Clone Repo
2. pnpm install
3. pnpm run dev
4. Navigate to localhost:3000/

Expected behavior

Greeting (HELLO, WORLD!) should be displayed as the env variable is passed through a server function to the loader, additionally the greeting should be displayed in the console (both server and client) but both return undefined

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.132.3
• OS: macOS Tahoe 26.0
• Browser: Chrome
• Browser Version: 140.0.7339.208
• Bundler: vite
• Bundler Version: 7.1.7

Additional context

No response

[dallastjames]

Ran into this as well after upgrading a project to the RC. I'm working around it by manually loading the env vars as part of my vite config until it can be patched in start directly.

import { tanstackStart } from '@tanstack/react-start/plugin/vite';
import { defineConfig, loadEnv, type ConfigEnv } from 'vite';
import tsConfigPaths from 'vite-tsconfig-paths';
import viteReact from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default ({ mode }: ConfigEnv) => {
  // Workaround to load secrets since it's broken in Tanstack RC0
  Object.assign(process.env, loadEnv(mode, process.cwd(), ''));

  return defineConfig({
    plugins: [
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }),
      tanstackStart(),
      viteReact(),
      tailwindcss(),
    ],
  });
};

[titusgahissy]

This is what I do

// src/env.ts

import { createEnv } from "@t3-oss/env-core";
import { config } from "dotenv"; // <---- ADDED THIS
import { z } from "zod/v4";

config(); // <---- ADDED THIS

export const env = createEnv({
  server: {
    IDP_URL: z.url().min(1, "IDP_URL is required"),
    IDP_CLIENT_ID: z.string().min(1, "IDP_CLIENT_ID is required"),
    IDP_CLIENT_SECRET: z.string().min(1, "IDP_CLIENT_SECRET is required"),
    SESSION_SECRET: z.string().min(1, "SESSION_SECRET is required"),
    REDIS_URL: z.string().min(1, "REDIS_URL is required"),
    ENV: z.string().min(1, "ENV is required"),
    UNSPLASH_ACCESS_KEY: z.string(),
  },
  client: {
    CLIENT_PUBLIC_URL: z.url().min(1, "CLIENT_PUBLIC_URL is required"),
  },
  clientPrefix: "CLIENT_",
  runtimeEnv: process.env,
});

[jensen]

This looks like something that was introduced in the latest RC merge #5189

The code in packages/start-plugin-core/src/load-env-plugin/plugin.ts used to be

Object.assign(
        process.env,
        vite.loadEnv(envConfig.mode, userConfig.root ?? startOpts.root, ''),
      )

Notice that the last argument is an empty string and removes the 'VITE_' default prefix.

The latest code doesn't use the last argument.

Object.assign(process.env, loadEnv(config.mode, config.root))

Now only 'VITE_' vars are getting through.

[brenelz]

I think If you add the nitro plugin it loads env variables?
https://tanstack.com/start/latest/docs/framework/react/hosting#using-nitro-v3-beta

[jensen]

I believe that nitro is a build time consideration based on this early return

router/packages/nitro-v2-vite-plugin/src/index.ts

Line 46 in 49e5fad

if (env.command !== 'build') {

I'm seeing this issue as described when using vite dev

[brenelz]

Oh I guess I'm using the nitro v3 plugin
https://github.com/brenelz/tanstack-faster/pull/1/files

[ivanfeli]

This is happening to me in v1.131.50 too.

__root.tsx (logs an empty object):

export const fnEnv = createServerFn().handler((ctx) => {
  return process.env
})

export const Route = createRootRoute({
  component: RootLayout,
  beforeLoad: async () => {
    console.log(await fnEnv())
  },
})

Results in this build file (see first line):

import process from 'vite-plugin-node-polyfills/shims/process';
import { c as createServerRpc, a as createServerFn } from './ssr.mjs';
import 'react/jsx-runtime';
import '@tanstack/react-router';
import 'node:async_hooks';
import 'vite-plugin-node-polyfills/shims/buffer';
import '@tanstack/react-router/ssr/server';

const fnEnv_createServerFn_handler = createServerRpc("src_rts_root_tsx--fnEnv_createServerFn_handler", "/_serverFn", (opts, signal) => {
  return fnEnv.__executeServer(opts, signal);
});
const fnEnv = createServerFn().handler(fnEnv_createServerFn_handler, (ctx) => {
  return process.env;
});

export { fnEnv_createServerFn_handler };

[DogPawHat]

So is this feature only meant to work in local dev anyway? If thats the case, re-enabling the nitro plugin and updating the docs to clarify that you'll need to handle prod envs separately is probably the way to go?

[kylekz]

i'm doing this in my vite config as per a recommendation in discord:

const config = defineConfig(async ({ mode }) => {
  process.env = {
    ...process.env,
    ...import.meta.env,
    ...loadEnv(mode, process.cwd(), ""),
  };

  await import("./src/lib/env/server");
  await import("./src/lib/env/client");

  return { ... }
});

lib/env/ is just two t3-env configs, one for the server pulling from process.env and one for the client pulling from īmport.meta.env. this works in dev, but doesn't work when running a production build. the build works, but then running the output complains about missing server variables.

[DogPawHat]

You can also use npx dotenvx run per here till this gets sorted https://dotenvx.com/docs/quickstart