create react app not picking up .env files?

Make sure your .env file is in the root directory, not inside src folder.

Had this same problem! The solution was to close the connection to my node server (you can do this with CTRL + C). Then re-start your server with 'npm run start' and .env should work properly.

Source: Github

If you want to use multiple environment like .env.development .env.production

use dotenv-cli package

add .env.development and .env.production in project root folder

and your package.json

"scripts": {
    "start": "react-app-rewired start",
    "build-dev": "dotenv -e .env.development react-app-rewired build",
    "build-prod": "dotenv -e .env.production react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"   
},

then build according to environment like

npm run-script build-dev 

I was having the same problem, but it was because I had my .env file in YAML format instead of JS.

It was

REACT_APP_API_PATH: 'https://my.api.path'

but it needed to be

REACT_APP_API_PATH = 'https://my.api.path'

For people who apply all those answers above and didn't work just restart the terminal of npm start, stop the live server and run it again and it will work because it works for me

Regarding env-cmd. As per VMois's kind post on gitHub, env-cmd has been updated ( version 9.0.1 as of writing ), environment variables will work as follows on your React project:

"scripts": {
    "build:local": "env-cmd -f ./.env.production.local npm run build",
    "build:production": "env-cmd -f ./.env.production npm run build"
  }

In your package.json file.

1- Make sure .env file is based your react app root directory

2- for react app you need to prefix REACT_APP_ to the variable name. ex: REACT_APP_API_URL

3- kill server and npm start again after .env file modify

For this purpose there is env-cmd module. Install via npm npm i env-cmd then in your package.json file in scripts section:

  "scripts": {
    "start": "env-cmd .env.development react-scripts start",
    "build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build",
  }

In your project root you have to create two files with the same env variables but with different values:

.env.development
.env.production

Then exclude them from public. For this in your .gitignore file add two lines:

.env.development
.env.production

So this is a proper way to use different env variables for dev and prod.

While working with .env file, be it frontend or backend.

• Whenever you modify the .env file, you must restart the respective server for the changes to take effect in the application.
• Hot reloading doesn't read changes from .env file.

Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_.

Reference: https://create-react-app.dev/docs/adding-custom-environment-variables

that doc creates confusion.

So you actually need to put prefix REACT_APP_ within the .env to make it work.

And make sure that you restart the test/dev/prod server because the .env content change was loaded on the build stage.

If the .env file works but .env.development or .env.production don't, then create an empty .env file alongside those two. I don't know why but this works for me.

when you get undefined from the environment file then just stop the terminal and restarts with npm start command.

And remember not to have semi-colon after the API key in the env-file.

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

should be

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

that was my error

There are different types of react app like vite react-app and normal react app.

Do the following steps first:

A. npm install dotenv --save

B. Add following line into your js file where you require environmental variables: require('dotenv').config()

C. In both kind of react app the .env file should be outside the source folder and should be right next to .gitignore and package.json file.

Second,

1. If you are using vite react app, then write your environmental variables as follows where VITE_ is compulsory VITE_API_KEY=28y4nkrasdhew

   Now to access this, use the following syntax in your javascript file as import.meta.env.VITE_API_KEY

2. Or if you are using normal react app, then write your environmental variables as follows where REACT_APP_ is compulsory REACT_APP_API_KEY=28y4nkrasdhew

   Now to access this, use the following syntax in your javascript file as process.env.VITE_API_KEY

I made the silly mistake of naming my file secret.env because that's how I always did it in Node.js. After changing the name to .env, restarting the terminal, and running npm start again, everything worked like a charm

For any VS Code users, be aware that the .env.local env file is auto-sourced, but also auto-ignored from search results when you do a project wide search for MY_ENV_VAR(probably due to it being git ignored by default). This means that if you have MY_ENV_VAR= in your .env.local like me and forgot about it, it'll break things and you'll spend 15 mins being very confused.

Was struggling for a good hour before I noticed my kind IDE added an import:

import * as process from "process";

just remove it and you're fine, if that's your case as well.

After you add .env file, you need to

• restart your application
• kill the server
• run npm start again

And it should work

The environment variable starts with REACT_APP_ (this is a must when using Create React App).

I had same issue that I wasn't able to access .env variable in App.js. and I had solved the problem use create correct .env file.

in my case I was copy file from different OS and use in ubuntu system so just I did "sudo touch .env" and added my variables and restart app again then it's working for me.

I didn't get any value back as well. For some reason, I thought the environment file should be dev.env, qa.env etc. Actually, it's just ".env". That's that. In case some else makes this mistake.

create-react does not supports hot reload feature .env files since they are not Javascript. So, when you change the env files make sure to manually start your server to see the effect of new changes.

In my case, a manual restart of the server worked fine :)

What worked for me was to install env-cmd and after that in my package.JSON add the following line of code

"scripts": {
"start": "env-cmd -f .env.development react-scripts start ",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

}

I forget to add process.env.

It looks like this

const domain = process.env.REACT_APP_AUTH0_DOMAIN;

first step:

in your .env.local file add REACT_APP_your_API_key in this way

second step:

Add your config file ${process.env.REACT_APP_Your_API_key}

the third step:

must restart your React App and then Test whether it works.

mainly, I forget the last step

If none of the solutions above worked for you, give these potential solutions a shot:

1. Make sure all the import statements within the file that is requiring defined environmental variables are being imported from the local project and not some other project(VSCode wrongly autocompleted some of my import statements in this manner)

2. Try exiting your current Terminal instance and running the app in a new instance

Follow these 3 steps:

1. Install dotenv

   npm install dotenv --save

2. Add following line in your code:

   require('dotenv').config()

3. Create a .env file in the root directory

In my case, simply restarting the application wasn't enough to access the environment variables. What worked for me was:

1. Stopping the application (using Ctrl+C in the terminal)
2. Rebuilding it with npm run build
3. Starting it again with npm start

After this env vars were successfully loaded.

In addition to making sure you have an .env file in your root folder, be sure any REACT_APP_* config values come first in the .env file. If you have anything otherwise, react-scripts won't pick it up. (The other ENV values are used elsewhere in the code)

Doesn't work

SUPABASE_URL="https://identifier.supabase.co"
SUPABASE_ANON_KEY="12345"
REACT_APP_MAPBOX_TOKEN="XYZ"

Works

REACT_APP_MAPBOX_TOKEN="XYZ"
SUPABASE_URL="https://identifier.supabase.co"
SUPABASE_ANON_KEY="12345"

Sample code

import logo from './logo.svg';
import './App.css';
import React, { useRef, useEffect, useState } from 'react';
import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax

mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN;

function App() {
  const mapContainer = useRef(null);
  const map = useRef(null);
  const [lng, setLng] = useState(-70.9);
  const [lat, setLat] = useState(42.35);
  const [zoom, setZoom] = useState(9);

  useEffect(() => {
    if (map.current) return; // initialize map only once
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://styles/mapbox/streets-v12',
      center: [lng, lat],
      zoom: zoom
    });    
  }, []);

  return (
    <div className="App">
      <div>
        <div ref={mapContainer} className="map-container" />
      </div>
    </div>
  );
}

export default App;