3 months ago
I have an application using TanStack Start, which uses Vite to run locally & build for production.
It has several server-side environment variables, which are accessed in my application code via process.env.
It has a single client-side environment variable, which is accessed in my application code via import.meta.env. This env var is prefixed with VITE_, as per Vite's requirements to use env vars in client-side code.
When I run or build my application locally, everything works just fine using the env vars defined in my local .env file.
When I push up my code to GitHub, Railway builds & deploys it just fine, but the client-side env var turns up as undefined and the application fails to load (because I use a Zod schema to parse & assert the env var exists, which it doesn't) -- accessing it as import.meta.env.VITE_MY_ENV_VAR yields undefined.
I've confirmed the following:
the service for the application has the
VITE_-prefixed variable, which is also shown in each service deployment's variablesthe application works just fine if I were to remove the Zod schema parsing and hard-code the client-side env var (which is relatively low-risk since it's just the public networking URL of a backend service within my project), but definitely not something I want to do.
Any help is appreciated. Thanks in advance!
7 Replies
3 months ago
Have the variables loaded successfully on your machine when you run a production build?
Just tested something similar in my tanstack start app and it seems to be working okay for me but I'll try it again with Zod. Are you loading the environment variable in an isomorphic page (the default for TSS) or are you using something I'm doing like ssr: false?
3 months ago
I sent the above message and edited this in central station but looks like it didn't propagate
3 months ago
Same issue here.
3 months ago
facing the exact same issue w/ any client side variables on tanstack start (^1.132.31) + railpack. had to also hardcode in urls for now for it to work which is kinda tedious and not ideal to keep changing
2 months ago
hey, updating this here.
for now, i've made a centralized client env state that falls back to hardcoded prod values when undefined, it "works" except there's a few pain points i'm specifically facing from this:
any client env change requires an entirely new branch > commit > pr > ci/cd > merge > deploy due to branch protection rules which can take up to 20 mins and is just tedious, rather than just updating the var in railway and having changes pushed to users in a couple mins.
various env vars can be intentionally undefined to disable features, blindly falling back to hardcoded values isn't always an option w/o going thru the entire above process.
client env vars differ between prod/staging.
vars from other railway services are referenced in some of these client side vars, which can change.
if anyone has any ideas/solutions on the best way to go around this, i'd appreciate it - it's been quite the setback attempting to launch a product w/ 30k+ waitlisted users that's solely built on the entire tanstack ecosystem...
dromzeh
facing the exact same issue w/ any client side variables on tanstack start (^1.132.31) + railpack. had to also hardcode in urls for now for it to work which is kinda tedious and not ideal to keep changing
2 months ago
Given this isn't an issue with the Railway platform or even Railpack, a minimal reproducible example would be extremely helpful for the community to help you.
2 months ago
you're right - mb, i fear i lack basic reading comprehension recently coming from nextjs. played around in a minimal repro and managed to get it working correctly. willing to create a repo w/ "how" if beneficial.