How the hell do I use a value from .env.client?
Hi, I am trying to use a basic env var I've outlined in .env.client.
Exactly as the documentation outlines (https://wasp.sh/docs/project/env-vars#client-env-vars):
Yet the project fails to compile, saying:
error TS2339: Property 'REACT_APP_GOOGLE_MAPS_API_KEY' does not exist on type '{ REACT_APP_API_URL: string; }'.
What the hell is it talking about? Why did I follow the documentation exactly yet Wasp act like it has no idea what the env var is?
2 Replies
Hi @jason. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I understand your frustration with the environment variables in Wasp. There seems to be a discrepancy between the documentation you're referencing and the actual implementation.
Based on the knowledge sources, there are two issues to address:
1. The correct way to access client environment variables in Wasp is using
import.meta.env rather than import { env } from 'wasp/client'.
According to the documentation:
2. For accessing the configuration object (which is different from directly accessing env vars), you would use:
The error you're seeing suggests that Wasp only recognizes REACT_APP_API_URL in the config object, but not your custom environment variable.
To fix this:
1. Make sure your .env.client file is properly set up with:
2. Access it in your code using:
During development, Wasp should pick up the variables from .env.client. For production, you'll need to provide them during the build process:
Or when using Wasp deploy:
Wasp Environment Variables Documentation provides more details on how environment variables work in Wasp.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @jason, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?lmao wtf.
If I'm supposed to access client env vars via "import.meta.env.REACT_APP..." then wtf is that part in the documentation about?
"import { env } from 'wasp/client'
console.log(env.REACT_APP_SOME_VAR_NAME)"
Why even mention that at all if it's not correct?