react evironment variables .env return undefined

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

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

• 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.gitignorepackage.jsonpackage-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"