CODEWITHSUNDEEP
reactjsenvironment-variablesparceljs
nik.ss
nik.ss

Reputation: 81

Why my environmental variable is returning undefined using parcel and react

I am working on a project in React and Parcel when I try console.log(process.env) is returning an empty object but if I add API_Key to it will return undefined

Can someone tell me what is wrong? Why my environmental variable is returning undefined

here is my package json :

"scripts": {
    "clear-build-cache": "rm -rf .cache/ dist/",
    "dev": "parcel src/index.html",
    "build": "parcel build index.html",
    "dev:mock": "cross-env OPEN-INV=mock parcel src/index.html",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
    "test": "echo \"Error: no test specified\" && exit 1"
},

here is my .env file which is next to the package .json REACT_APP_API_KEY:"my api key"

console.log(process.env) // {}
console.log(process.env. REACT_APP_API_Key)// undefined

Upvotes: 4

Views: 5564

Answers (3)

Emanuele Scarabattoli
Emanuele Scarabattoli

Reputation: 4469

First of all, are you using REACT_APP_API_Key instead of REACT_APP_API_KEY? Maybe it is the problem.

Upvotes: 0

Tomas Toman
Tomas Toman

Reputation: 41

Another use case that can cause this issue is package.json or even package-lock.json up the folder tree. Parcel will for some reason load environment variables from the top-most package.json file it can find.

So check your folder structure and make sure there are no package.json or package-lock.json files above your project folder.

Upvotes: 4

dance2die
dance2die

Reputation: 36905

There are two issues.

1. Change .env variable name, value declarations

Environment file, .env requires value & name in NAME=VALUE format.

So instead of 

REACT_APP_API_KEY:"my api key"

You need to do

REACT_APP_API_KEY=MyAPIKey

Refer to the .env USAGE documentation pointed from Parcel .env documentation, which uses dotenv

2. You need to refer to the environment variable exact the way you declared.

As pointed here by @Emanuele,

You need to refer to the environment variable name exactly the way it's declared. So instead of 

process.env. REACT_APP_API_Key

Refer to the value as

process.env. REACT_APP_API_KEY

* Update: Using dotenv * to configure environment variables

As you are using Parcel, you need to manually load the environment variable, using dotenv. (create-react-app automatically handles this).

After installing dotenv, you need to call config() to parse the .env file to be able to use it as process.env.REACT_APP_API_KEY.

Refer to the sample code below

.env

REACT_APP_API_KEY=API key from .env file

App.js

import React from "react";
import { render } from "react-dom";
import dotenv from "dotenv";

dotenv.config();

function App() {
  console.log(`process.env`, process.env);
  return <h1>{process.env.REACT_APP_API_KEY}</h1>;
}

render(<App />, document.getElementById("app"));

You can see the console output & the header shown using the environment variable value.

working demo

You can follow the demo in the Sandbox.
Edit so.answer.57224268

👆 The sandbox uses parceljs.

Upvotes: 4

Related Questions