process.env.API_KEY is undefined

Question

I am building a small application in react using firebase. I tried to put my firebase api key API_KEY=somekey in.env file which is in the root folder but when I use the process.env.API_KEY, I get an error in browser console shown in the picture below.

However, I have copied my api-key correctly in.env. what else could be the problem?

Is there any configuration to be done in package.json before I use the process.env.API_KEY?

Answer 1

If you are using webpack try changing webpack config. Check doc here

const webpack = require("webpack");
const config = require("dotenv").config();

module.exports = {
  // some config
  plugins: [
    new webpack.EnvironmentPlugin(config.parsed),
  ],
};

OR

You can use steps suggested here

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_.

Answer 2

Hy, here is the documentation explaining how to use env variables in react: link here .

You must name your env variable REACT_APP_API_KEY in order to use it inside your react project.

You can also check this response: response here .

Answer 3

as Raphael Escrig commented, set API_KEY=somekey to REACT_APP_API_KEY=somekey in.env file and call with process.env.REACT_APP_API_KEY

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.