React JS app: .env var returns undefined

Programming
, , , ,
1

I’m having trouble getting environment variables to work in my React app. I have done the following:

  1. Installed the latest version of react-scripts
  2. Added a .env file in the root folder (same location as node_modules)
  3. Added REACT_APP_OTHER_OTHER_THING=asdfas to test the variable
REACT_APP_OTHER_OTHER_THING=asdfas
  1. Opened index.js and added console.log(process.env.REACT_APP_OTHER_OTHER_THING) inside to see the output
import React from 'react';
import Reactdom from 'react-dom';
import App from './App';

console.log(process.env.REACT_APP_OTHER_OTHER_THING, 'DOTENV')

Reactdom.render(<App/>, document.getElementById("app"))

After rebuilding the app and starting it, the output for process.env.REACT_APP_OTHER_OTHER_THING is undefined. I have also tried adding a temporary variable as the Create React App documentation suggests, and running ($env:REACT_APP_OTHER_OTHER_THING= "abcdef") -and (npm start) (in Powershell), but the output is still undefined.

What can I do to get the environment variables to work?

2

Make sure that your .env file is named correctly and is in the root directory of your project. The variable name in the .env file should be prefixed with REACT_APP_. Also, make sure to restart your development server after making changes to the .env file.