Environment Variables don't work in a nested JS file (React)

Question

I'm trying to use environment variables in create-react-app.

I've prefixed all of the variables in my .env file with REACT_APP_ and installed/required dotenv.

However, I'm suspecting that the reason why my .env values aren't being read is because the script in which I'm calling them from isn't in the root folder where my .env file is located.

There's a quick overview of my project structure below

ROOT: .env VIEWS (folder): view.js

I'm trying to access the .env variables in view.js by calling process.env.REACT_APP_MYVAR but it either doesn't return a value or returns something that isn't a string (which is the error my API is throwing, but it could be because that call is returning undefined )

Is this a known issue or is there any way I can fix this? I could just take the script out of that folder and put it in the root of my app but I'd rather keep the structuring of the app consistent

Answer 1

You don't need to "install/require" dotenv. If you are using create-react-app, this functionality is available with no additional install required.

You indicate that .env is in your root, but I suspect it may not actually be in your root. From your description, it sounds like you have it in your root source folder, but the .env file belongs in the root directory of your app (ie the same directory as your package.json file).

Here's a CodeSandbox (using create-react-app) that demonstrates using an environment variable in a nested file:

The contents of this sandbox includes:

.env (in the same directory as your package.json file)

REACT_APP_MYVAR=Here is my value for REACT_APP_MYVAR

src/index.js

import React from "react";
import ReactDOM from "react-dom";

import View from "./views/View";
function App() {
  return <View />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

src/views/View.js

import React from "react";
const View = () => {
  return <div>My Var: {process.env.REACT_APP_MYVAR}</div>;
};
export default View;

The result that gets rendered is:

My Var: Here is my value for REACT_APP_MYVAR

The environment variable can be used in any of the js source files regardless of level of nesting.

If this doesn't help with your problem, please show the exact contents of your .env and view.js .

Answer 2

remove dotenv . Here is my git-repo for accessing REACT_APP_KEY. tell me if this solves your problem.

git-repo

Answer 3

Change .env to .env.development.local

Actually .env also work but if you have other .env.* file it will override .env ,

.env is least priority in create-react-app

if you run project with npm start this file .env.development.local will override other env files

priority goes like this, form left to right

npm start: .env.development.local, .env.development, .env.local, .env