Environment variables configuration

[osvald0]

Summary

I have a monorepo project with:

Apps: mobile and web.
Packages: hooks, apis, models, etc.

I hooks I have some functions to fetch data. Hooks use some methods from apis.
In apis I'm trying to use some environment variables, but they are not loaded.
I tried with dotenv, but it threw an error.

Attached are images of my config.
What do you think the right way is to handle this case?

[DeveloperMindset123]

Hello, this looks like an import error on the build, Next.Js generally comes with .env file processor so separately installing dotenv package isn't necessary. A quick and dirty way to check if your environmental variables are loading as intended is to just console.log it and check what values are being outputted, that gives a solid indication of whether or not .env files are loading or not. If you want to know further, the following link might be of help. (https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables)

As for the second error, it seems there was another Github PR that helped clear up the confusion, the following is the link : vercel/next.js#54176. The culprit is most likely the use of "use strict" in your index.js file within the dist directory, as hooks are treated as client side components rather than server side and the fs module is a server side module. Additional link that may be helpful --> vercel/next.js#52566. Lastly, although it's not a big deal and more so depends on your personal preference, utilizing typescript over javascript throughout the entirety of the project is the general sentiment as it tends to be less error prone, but this is entirely up to you. (You can take a look at this link if you would like to gain a better understanding of why typescript is preferred over javascript, https://www.reddit.com/r/typescript/comments/sqswhb/is_it_better_to_just_use_ts_instead_of_js/)

I hope this helps, if not, let me know.

[osvald0]

I already checked them with a console.log before sending the question. That is the reason why I told the variables aren't loaded.

[DeveloperMindset123]

I see, I had this issue in the past, in some projects/instances my .env variables wouldn't load, I came up with a bootleg alternative to it, although it works, I think there might be better solutions out there. For starters, install the dotenv package using whichever package manager your using, and then use the following line:

require('dotenv').config({ path: '/custom/path/to/.env' })

Just replace the path within the string with whatever path your .env file is pointing to. Since chances are that for some reason your project may not automatically be picking up the path to the environment file. If you want to read up on it further, please refer to the following link : https://www.npmjs.com/package/dotenv. This should solve your issue with the dotenv side of the problem.

[osvald0]

I created a new fresh project using the kitchen-sink example. I can use env variables from the apps but not from the packages. The documentation is not clear about this tbh.

[askurat]

Also have the same issue. Any update on this? Or just how to load env vars from packages?

[osvald0]

Could you try adding the variable at the application level where you use the package?