Create-React-App: .env file doesn't parse correctly

Question

My CRA project isn't parsing my environment variables. I see this in the docs:

By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_

And here is some code for testing:

// .env in the project root folder
REACT_APP_GOOGLE=google.com
REACT_APP_API_POST_URL=http://localhost:4000/api/

// App.js
import dotenv from 'dotenv';

  componentDidMount() {
    if (dotenv.error) {
      console.log('dotenv.error', dotenv.error);
    } else { console.log('dotenv.parsed', dotenv.parsed); // undefined
    }
  }


// App.js insider render()
<button
   onClick={e => {
   e.preventDefault();
   console.log("process.env", process.env); // 
// {NODE_ENV: "development", PUBLIC_URL: ""}
// NODE_ENV: "development"
// PUBLIC_URL: ""             
console.log("process.env.NODE_ENV", process.env.NODE_ENV); // development               
console.log("process.env.REACT_APP_GOOGLE", process.env.REACT_APP_GOOGLE); // undefined
    }}
    >log .env</button>

Anyone know why it's not parsing the env variables?

From package.json: "react": "^16.6.3", "react-dom": "^16.6.3", "react-scripts": "2.1.1", — Sean D
– Sean D, Commented Dec 23, 2018 at 20:06

SakoBu · Accepted Answer · 2018-12-23 20:30:05Z

1

Here is your component:

import React, { Component } from 'react';
import './App.css';

const googleEnvVariable = process.env.REACT_APP_GOOGLE;

class App extends Component {
  render() {
    return <div className="App">{googleEnvVariable}</div>;
  }
}

export default App;

And here is your .env

REACT_APP_GOOGLE=hereisyourenvvar

You should see hereisyourenvvar

EDIT: updated answer to display on the screen instead of the console.log...

edited Dec 23, 2018 at 20:30

answered Dec 23, 2018 at 20:13

SakoBu

4,0311 gold badge18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sean D Over a year ago

Ok, I did this outside render(): googleEnvVariable = process.env.REACT_APP_GOOGLE; And then inside render(): <div>{this.googleEnvVariable}</div> Nothing displayed. I guess it's still undefined

SakoBu Over a year ago

@SeanDezoysa I'm not sure I understand... So you have replaced API_KEY with googleVairable so just console.log googleVariable and you will see it in the console...

SakoBu Over a year ago

There should be no this @SeanDezoysa

SakoBu Over a year ago

@SeanDezoysa If you are using create-react-app you do not need to install or import detenv... It comes baked in... you simply need to create a .env file in the src directory... define your variable there as I showed you... assign it to a const in you App.js like I showed you and it should work...

Sean D Over a year ago

Ok, got it working. I put the .env file in the project root and rebuilt the app. I suspect not rebuilding was causing most of the issues. Thanks

|

Treycos · Accepted Answer · 2018-12-23 21:53:48Z

1

From the code you gave, it seems like you forgot to call the config function (unless you didn't show it). If you want your .env to be implemented, you will have to do the following at the top level of your project :

import dotenv from 'dotenv';
// Load ENV vars
const dotEnvOptions = {
    path: 'env/dev.env' //Example path relative to your project folder
}

dotenv.config(dotEnvOptions)

To figure out what is going wrong you may turn on logging to help debug why certain keys or values are not being set as you expect :

dotenv.config({ debug: true })

From there, if a path/variable isnt recognized, it will be printed int he console :

If you are not seeing anything, it either means that your path is wrong or that the code isn't executed

edited Dec 23, 2018 at 21:53

answered Dec 23, 2018 at 21:05

Treycos

7,4913 gold badges29 silver badges53 bronze badges

8 Comments

Sean D Over a year ago

My .env file is in the project root, is there an error in this code? rendering the const shows 'nothing found'

const dotEnvOptions = {   path: './.env' }; dotenv.config(dotEnvOptions);  const googleEnvVariable = process.env.REACT_APP_API_POST_URL || 'nothing found';

Sean D Over a year ago

also tried setting the path as '.env' and '/.env' without success

Treycos Over a year ago

Alright, just type path: '.env' instead, it should hopefully do the trick. Ok, nervermind

Treycos Over a year ago

Is the quotation mark in your variable supposed to be here ? : "http://localhost:4000/api/

Sean D Over a year ago

No! I have removed them. But it still does not pick up the ENV variables

|

Collectives™ on Stack Overflow

Create-React-App: .env file doesn't parse correctly

2 Answers 2

7 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related