Next.js Discord

Discord Forum

Environment variable are not loading on client side turborepo

Unanswered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
I'm tring to import some environment varibles in my project but when I import them in client components they are not coming but when they are coming in middleware file. I have added the NEXT_PUBLIC infront of all the varibles that I want in client. For each app I have created their own. Env. File. Is the something else that need to be set for it to work?

14 Replies

Asian black bearOP
I have attach the screenshot please let me know if you need anything else thank you
@Asian black bear I have attach the screenshot please let me know if you need anything else thank you
thanks for sharing.
1. Can you put the public keys inside .env without .local at the end and test it like this.
2. Also try to move your process.env.NEXT... calls inside your useEffect.
3. Lastly, remove the question marks inside your process?.env?... and also the fallback and console.log the output of the variable. What do you read?
Asian black bearOP
I tried it without. Local I didn't work. I will put them inside the useEffect and check.
@Asian black bear what's the result?
Asian black bearOP
Sorry fir delayed reply it's still unrefined.
@Asian black bear Sorry fir delayed reply it's still unrefined.
it looks like your setup with multiple apps inside one project does not work correctly and like that the .env is not correctly detected. Make sure to have for each project only one app or create a [monorepo ](https://nextjs.org/blog/incremental-adoption#micro-frontends-with-monorepos-and-subdomains) to make everything work well
Asian black bearOP
It's able get environment varaiblrs i set in vercel but not from local. I will check again
Asian black bearOP
I also have another question I've a app Main and 2nd Billing if user do /billing in main app it'll rewrite the url to Billing but user need to authorized to view billing .and the authorization is present in main app. When user visite /billing from main app billing check if user is authorize and move it to main/account/signin but I'm getting chunk load error reason because next-js trying to find that chunk in billing app whereas it's present in main app. Did you get me.
@Asian black bear solved?
Asian black bearOP
I changed how I was configuring auth it's still in process. I checked typehero github repo to take inspiration I hope it will work
I will post here if I able to fix that thank you for asking