react evironment variables .env return undefined

Question

I am building a react app and i need to fetch data from my api, now i want to store the api url as an environment variable. I have my .env file, i have dotenv installed, here is my code process.env.API_URL is returning undefined.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Home from '../src/components/Home'
import dotenv from  'dotenv'
import path from 'path'


class App extends Component {
  render() {
    console.log(process.env.API_URL)
    return (
      <div>
        <Home/>
      </div>
    );
  }
}

export default App;

Answer 1

Three things to note here

1. the variable should be prefixed with REACT_APP_

   eg: REACT_APP_WEBSITE_NAME=hello

2. You need to restart the server to reflect the changes.

3. Make sure you have the .env file in your root folder(same place where you have your package.json) and NOT in your src folder.

After that you can access the variable like this process.env.REACT_APP_SOME_VARIABLE

Additional tips

1. No need to wrap your variable value in single or double quotes.
2. Do not put semicolon ; or comma , at the end of each line.

Read more here(my own post) and the official docs

Answer 2

You will probably need to call dotenv.config() as suggested by the document

If you are using create-react-app, you don't need dotenv package. You will need to add REACT_APP_ prefix to the variable name in .env file. See the document here

Answer 3

• Add prefix REACT_APP_ on React environment variables.

  apiKey: process.env.REACT_APP_API_KEY
  

• Make sure .env file is in the root directory.

  src/
  .env
  .gitignore
  package.json
  package-lock.json
  

• Restart the development server after making changes in .env file.

• Copy only the value inside the quotation marks and don't forget to remove trailing commas(It haunted me for several hours). These examples will give you an error.

  REACT_APP_API_KEY=Ach2o1invVocSn25FcQhash209,
  REACT_APP_API_KEY="Ach2o1invVocSn25FcQhash209",
  REACT_APP_API_KEY="Ach2o1invVocSn25FcQhash209"
  

Answer 4

• Make sure you used the prefix REACT_APP on every variable

• Confirm that the variable names on the .env file match the ones on
  your js file.For example,REACT_APP_KEY in .env versus process.env.REACT_APP_KY

• If the development server was running, stop it then rerun using npm start it. I really struggled with this (variable is an undefined error).
• Every time you update the .env file, you need to stop the server and rerun it, as the environment variables are only updated during build (variable is an undefined error).
• Remove quotations from the values of the variables.

// Wrong: 
REACT_APP_KEY=”AHEHEHR”

// Right:
REACT_APP_KEY=AHEHEHR

Answer 5

If the above solutions don't work for you then please check where is your ".env" file place. Like in my case everything I had done correctly but the mistake is I had placed the ".env" outside my project directory due to which I'm getting error.

Note: Your ".env" file should be in the same directory in which your "package.json" is.

Answer 6

1. restart the vscode (close the project, close the editor)
2. open it again
3. launch the project

In my case it help a lot. Also remember to start the name of your key with REACT_APP_YOUR_NAME_KEY

Answer 7

Hey thanks guy what i did and worked was create a config.js file

 const dev={
    API_URL:"http://localhost:300"
}

const prod={
    API_URL:"llll"
}
const config=process.env.NODE_ENV=='development'?dev:prod
export default  config

Then i import wherever maybe in a component and get my data.

Answer 8

Another possible trap in which I fell was to define the variables not under the create-react-app folder but one above(where the Node server/backend .env is located). Make sure you don't do that because you will waste precious time, as I did today.

Answer 9

try by clearing the cache also.

npx react-native start --reset-cache

Answer 10

To add another reason:

check you don't have a function / variable called process in your react code

Answer 11

FIX:

in babel.config.js, if you're using the optional configuration:

    {
  "plugins": [
    ["module:react-native-dotenv", {
      "moduleName": "@env",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": false,
      "allowUndefined": true
    }]
  ]
}

you should then import:

import {API_URL, API_TOKEN} from "@env"

instead of:

import {API_URL, API_TOKEN} from "react-native-dotenv"

the NPM Package description itself has this inconsistency

Answer 12

DO NOT STORE OR USE API KEYS IN FRONTEND CODE SINCE IT IS EASILY READABLE THROUGH DEV TOOLS

Saving API keys in .env and using them in your React app will still be unsecured since the API key can be read from DevTools.

Use some simple backend code that will act as a proxy to your service.

Send required data through a request and then the backend should use that data including the API key stored on the backend, and then make a request to some particular service that needs that API key.