Issues accessing variables from .env file

Question

I have been trying to get my API key from my .env file that is at the root of my folder of my Vite app to a JSX file where I want to do the fetching, but each time I use process.env.{MY_VARIABLE_NAME} the browser console returns an error:

ReferenceError: process is not defined

The line where I am trying to get data from the API:

const api = await axios.get(`https://api.spoonacular.com/recipes/random?apikey=${process.env.RECIPE_API_KEY}`)

I checked around and I have tried installing dotenv and it still not works

Can anyone help with this, and if there is any more information that will be needed, I am available to provide it.

score 1 · Answer 1 · answered Jun 25 '23 at 10:29

1

The process object is not available in the client side javascript environment, if you were running this on server side runtime it would work.

answered Jun 25 '23 at 10:29

Manish Kumar

595
2
15

I understand that, but I am following a tutorial and I did basically the same thing the tutor did and it is giving an error he did not encounter. – busayolawumi Jun 25 '23 at 11:00
can you pls share the link where you found this? – Manish Kumar Jun 25 '23 at 11:07
If it is the link to the tutorial, then: https://www.youtube.com/watch?v=xc4uOzlndAk&t=48s – busayolawumi Jun 25 '23 at 12:01
have you re-build entire project after adding those process variable? It seems the bundler is not properly injecting it into client side. – Manish Kumar Jun 25 '23 at 12:45
I have run the yarn build command on my CLI and it is still giving the issue – busayolawumi Jun 25 '23 at 13:27
ok, i see they have referenced this github project. Could you please check if this works ? https://github.com/ikramdeveloper/spoonacular-recipes-app-react – Manish Kumar Jun 25 '23 at 14:12

score 1 · Answer 2 · answered Jun 25 '23 at 11:06

1

You may try by assigning it to the variable and then use it as:

const API= process.env.RECIPE_API_KEY;
const api = await axios.get(`https://api.spoonacular.com/recipes/random?apikey=${API}`)

I think this will work

answered Jun 25 '23 at 11:06

Amit Poudyal

69
5

Thanks for your contribution, I just tried this and it is still giving the same error – busayolawumi Jun 25 '23 at 12:03

score 1 · Answer 3 · answered Jun 25 '23 at 11:32

1

If you're not using a React app or a bundler like Webpack, and you want to use environment variables directly on the client side without any build process, you can expose the environment variables in your server's response and access them in your client-side JavaScript code.

answered Jun 25 '23 at 11:32

Rhythm Shandlya

124
7

Can I be having this issue because I used yarn create vite? – busayolawumi Jun 25 '23 at 12:01

score 0 · Accepted Answer · answered Jun 25 '23 at 18:39

After doing some research, I found out that, since I am using a Vite React app, to access the variables in the .env file import.meta.env.{MY_VARIABLE_NAME} should be used instead of process.env.

And my I have to add a VITE_ prefix to the start of the variable name in both my .env file and where I am trying to access the API key.

Issues accessing variables from .env file

4 Answers4