Can`t use environments from .env file (React)

Question

Why does process.env not see my environments from the .env file? I already added REACT_APP_API_KYE = 'some-code-example' in the file, but when I try to use it in the api request, all apps are down. I did restart my app after creating the .env file.

.env

REACT_APP_API_KEY = 'euk4h43l-ertek8-rgde45-gkr3945';

.common.api.ts

export const instance = axios.create({
    baseURL: 'xxxxxxx',
    withCredentials: true,
    headers: {
        'API-KEY': process.env.REACT_APP_API_KEY
    }
})

What does "when I try to use it in the api request, all apps are down" mean? — AKX, May 08 '23 at 12:38
How are you bundling your code? `create-react-app`? `vite`? Something else? — nullptr, May 08 '23 at 12:40
Have you tried console log the key? Can you see it? And I'm guessing you just did a typo in the question? — Wahlstrommm, May 08 '23 at 12:42
Did you add the [`dotenv`](https://www.npmjs.com/package/dotenv) package and call `dotenv.config()` at the beginning of your script? — Mr. Polywhirl, May 08 '23 at 12:49
Did you following the official guide about [Adding Development Environment Variables In .env](https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env)? — pzaenger, May 08 '23 at 12:53

Mr. Polywhirl · Answer 1 · 2023-05-08T13:03:34.463

0

Have you added the dotenv package to your package.json, and called dotenv.config() at the beginning of your script?

// npm install dotenv
import * as dotenv from 'dotenv' // import

dotenv.config() // load .env into process.env

export const instance = axios.create({
    baseURL: 'xxxxxxx',
    withCredentials: true,
    headers: {
        'API-KEY': process.env.REACT_APP_API_KEY // access
    }
})

edited May 08 '23 at 13:03

answered May 08 '23 at 12:53

Mr. Polywhirl

42,981
12
84
132

I install dotenv, add dotenv.config(), and restart app - Error – mustToKnowAnswer May 08 '23 at 12:58
@mustToKnowAnswer what is the error? Have you tried to log out the value before the `export` call? e.g. `console.log(process.env.REACT_APP_API_KEY)` – Mr. Polywhirl May 08 '23 at 12:59
Module not found: Error: Can't resolve 'process' in – mustToKnowAnswer May 08 '23 at 13:03
@mustToKnowAnswer if you search for the error, you will come across [this Webpack issue](https://stackoverflow.com/a/65018686/1762224). – Mr. Polywhirl May 08 '23 at 13:05

score 0 · Answer 2 · answered May 08 '23 at 13:04

0

you need to install

npm install dotenv --save

after this add to your app.

require('dotenv').config()

answered May 08 '23 at 13:04

todary

1
3

@today which file i must add require('dotenv').config() ? – mustToKnowAnswer May 08 '23 at 13:09
in your file that you wanted to user .env **require('dotenv').config({path:__dirname+'/./../../.env'})** – todary May 08 '23 at 13:18
@today does not work ! – mustToKnowAnswer May 08 '23 at 13:22

Can`t use environments from .env file (React)

.env

.common.api.ts

2 Answers2