react evironment variables .env return undefined

Solution 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

Solution 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