TypeError: Cannot read properties of undefined (reading 'REACT_APP_STRIPE_MODE')
I am trying to add new client variable switch between stripe prod and test. But when I try to access the variable it can't find it .
I tried two way to access it;
import {env} from 'wasp/client'
env.REACT_APP_STRIPE_MODE
OR
import.meta.env.REACT_APP_STRIPE_MODE;
does anyone know why?
9 Replies
Hi @yalcinos. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Wohooo @yalcinos, you just became a Waspeteer level 2!
----------------------
Based on the information provided in the knowledge sources, I can help explain why you're encountering this issue and how to properly set up and access client-side environment variables in Wasp.
The error you're seeing suggests that the environment variable
REACT_APP_STRIPE_MODE is not defined or accessible in your client-side code. Here's how you can address this:
1. Define the environment variable:
During development, you should define your client-side environment variables in a .env.client file in the root of your Wasp project. For example:
Docs > Project > Env Variables > Defining Env Vars in Development explains this approach.
2. Access the environment variable:
In your client-side code, you should access the variable using import.meta.env:
This is the correct way to access client-side environment variables in Wasp, as mentioned in Docs > Project > Env Variables.
3. For production:
When building for production, you need to provide the environment variables to the build command. For example:
This is explained in Docs > Project > Env Variables > Defining Env Vars in Production.
The env import from 'wasp/client' that you mentioned is not documented in the provided knowledge sources, so I can't confirm if that's a valid approach in Wasp.
Remember that client-side environment variables are embedded into the client code during the build process, so they need to be defined before building. They cannot be changed at runtime or set in the server environment (like on Fly.io) after the build.
If you've followed these steps and are still encountering issues, make sure that:
1. Your .env.client file is in the correct location.
2. You're running wasp start to pick up the environment variables during development.
3. You're providing the environment variables when building for production.
If the problem persists, you may need to check if there are any typos in your variable names or if there are any caching issues with your build.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @yalcinos, 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?Still give this error when i try to do wasp start
I solved the issue 🙂 I was trying to use meta.env in server side code my badd.
If you try to use;
import { env} from 'wasp/client'
you have to add zod validation otherwise it is going to fail;
https://github.com/wasp-lang/wasp/issues/2523
GitHub
Improve env vars docs clarity · Issue #2523 · wasp-lang/wasp
Based on this series of messages: https://ptb.discord.com/channels/686873244791210014/812664118887841813/1341866176766017587 It's confusing that we are saying "Use the env object" wit...
glad you got it fixed. We are adding Zod validation in the next Open SaaS update 🙂
perfect 🙂
@yalcinos good job figuring it out yourself! The issue you linked is something we'll tackle soon, we want to improve the readability of the env docs so it's 100% clear what you need to do 🙂
Perfect! Thank you 🙂