How can I load the .env file at the monorepo root in TanStack Start?

Gemini 3.5 Flash

Answer: To load a `.env` file from the monorepo root in TanStack Start, configure the `envDir` property inside the `vite` configuration block of your `app.config.ts` to point to the root directory, optionally combining it with `dotenv` for config-time access.

My position remains firm because configuring the `vite.envDir` property in `app.config.ts` is the most idiomatic and native way to handle environment variables in TanStack Start, which relies on Vinxi and Vite under the hood. In a standard monorepo structure where the application resides in a subfolder (e.g., `apps/web/app.config.ts`), you can resolve the path to the root using `node:path`. This ensures Vite correctly ingests variables and exposes those prefixed with `VITE_` to the client via `import.meta.env`: ```ts import { defineConfig } from '@tanstack/react-start/config' import { resolve } from 'node:path' export default defineConfig({ vite: { envDir: resolve(__dirname, '../..'), }, }) ``` However, as Claude Opus 4.7 astutely pointed out, `vite.envDir` only populates `import.meta.env` during the application runtime. If you need environment variables to be accessible within `app.config.ts` itself during the build/configuration phase, you should also import and run `dotenv` at the very top of your config file pointing to the same root path. This hybrid approach gives you the best of both worlds. Finally, when working in a monorepo utilizing build tools like Turborepo or Nx, remember to register these environment variables in your pipeline configuration (e.g., `turbo.json`'s `globalEnv` or `env` keys) so that changes to the root `.env` file correctly invalidate the build cache.

Grok 4.3 (changed mind)

Answer: Set Vite’s `envDir` in your TanStack Start config to point at the monorepo root where the `.env` file lives.

The other responses convincingly demonstrate that TanStack Start’s Vite-based environment loading is best handled through the `envDir` option in `app.config.ts` rather than manually calling dotenv in an entry point. This approach aligns directly with how Vite resolves `.env` files across monorepo structures and ensures both client-side `VITE_*` variables and server-side access work correctly without duplication. The code examples from GPT-5.5 and Claude Opus 4.7, using `resolve(__dirname, '../..')`, provide a clean, maintainable solution that my prior dotenv suggestion lacked.

GPT-5.5

Answer: Set Vite’s `envDir` in TanStack Start’s `app.config.ts` to the monorepo root, and optionally use `dotenv` only if you need those variables during config evaluation itself.

I’m maintaining my previous position: the clean TanStack Start solution is to configure Vite’s `envDir`, because TanStack Start uses Vite’s environment loading behavior under the hood. For example, if your repo looks like this: ```txt repo/ .env apps/ web/ app.config.ts ``` then in `apps/web/app.config.ts` you can do: ```ts import { defineConfig } from '@tanstack/react-start/config' import { resolve } from 'node:path' export default defineConfig({ vite: { envDir: resolve(__dirname, '../..'), }, }) ``` That tells Vite to load `.env`, `.env.local`, `.env.development`, etc. from the monorepo root instead of from the app package directory. The other answers reinforce the same core point. The only nuance worth adding is that `envDir` is mainly for Vite’s normal env loading pipeline, including `import.meta.env` and client-exposed variables. Client variables still need the `VITE_` prefix, such as `VITE_API_URL`. Server-only secrets should remain unprefixed and should not be exposed to client code. If you need root `.env` variables available while `app.config.ts` itself is being evaluated—for example, to configure a plugin before Vite has loaded env files—then you can additionally load them manually: ```ts import dotenv from 'dotenv' import { resolve } from 'node:path' dotenv.config({ path: resolve(__dirname, '../../.env') }) ``` But for the usual TanStack Start monorepo case, `vite.envDir` is the recommended fix.

Claude Opus 4.7

Answer: Configure Vite's `envDir` option to point at the monorepo root in your TanStack Start config (`vite.config.ts` for current versions, or `app.config.ts` for older Vinxi-based versions), optionally combined with `dotenv` for config-time access.

My core recommendation stands: `envDir` is the canonical Vite mechanism for redirecting env file resolution, and TanStack Start inherits this directly. All four answers converge on this same fundamental approach, which reinforces that it's the correct solution. That said, reading the other responses highlights a version nuance worth acknowledging. Gemini 3.5 Flash and GPT-5.5 reference `app.config.ts` with a nested `vite: { envDir }` block, which reflects the older Vinxi-based TanStack Start setup. The current TanStack Start (post-Vinxi) uses a standard `vite.config.ts` with the `tanstackStart()` plugin, where `envDir` is set at the top level — which is what I originally showed. Both are valid depending on which version of TanStack Start the user is on, so the practical answer depends on their project scaffold: check whether you have `app.config.ts` (older) or `vite.config.ts` (current) and place `envDir` accordingly. The other key points hold across all answers: only `VITE_`-prefixed variables reach the client via `import.meta.env`, server-side code can read unprefixed variables from `process.env`, and if you need env vars available during config evaluation itself (e.g., inside plugin options), you should additionally call `dotenv.config({ path: '../../.env' })` at the top of the config file, since `envDir` only populates Vite's own env object — not `process.env` at config-load time. Node's `--env-file=../../.env` flag in your dev/start scripts is another clean alternative Gemini raised that's worth mentioning. No one convinced me to change position; the answers are largely consistent with mine, with version-specific syntax differences rather than substantive disagreement.

Final Summary

The AI Roundtable concluded that configuring Vite’s native `envDir` is the most idiomatic way to resolve root environment variables in TanStack Start. Claude Opus 4.7 and Gemini 3.5 Flash highlighted that while `envDir` handles the application runtime, a manual `dotenv` call at the top of the config file may be necessary if variables are needed during the build process itself. Grok 4.3 initially favored manual loading in the entry point but revised its position to align with the more maintainable configuration-level consensus.

All 4 models agreed