Search code examples
reactjsenvironmentdotenv

.env constants not readable in React project

I have a an issue trying to get constants our of my .env file in a React app. My app structure is pretty basic:

my-react-app/
|- .env
|- .gitignore
|- .prettierrc
|- node-modules/
|- public/
|- src/
   |- Base.js
   |- App.js
|- package.json
|- yarn.lock
|- README.md

I'm using react-scripts version "3.2.0"

The .env looks like this:

# .env
# Auto-logout values
REACT_APP_LOGOUT_PERIOD_MINS=15

and the Base.js file looks like this:

require('dotenv').config({ path: '../.env' })
console.log(process.env)

export const LOGOUT_PERIOD_MINS = process.env.REACT_APP_LOGOUT_PERIOD_MINS

What I get from the console.log() call in Base.js is:

{NODE_ENV: "development", PUBLIC_URL: ""}

I've tried putting Base inside the root directory, which errors because it's outside src. I've tried with and without the path config setting. What am I doing wrong?

Solution

  • As per my comment, you'll probably wanna close your terminal window and re-run yarn start from a fresh terminal. 9/10 this is the reason for env vars not showing up. :)