Search code examples
javascriptreactjsdotenvfaunadb

One .env variable returns correctly but the other one is undefined in the same file

Context: This is a React application and I want to use a .env file to store my DB related credentials. This will probably change in the future, but I can't get this working for some reason.

.env:

REACT_APP_FAUNA_API_KEY=**************** // returns fine if I console.log() it and I can also use it in the rest of the code
FAUNA_DB_ID=***************** // returns undefined

db.js:

import faunadb from "faunadb";

require("dotenv").config();

const client = new faunadb.Client({
  secret: process.env.REACT_APP_FAUNA_API_KEY,
  domain: "db.eu.fauna.com",
  port: 443,
  scheme: "https",
});
const q = faunadb.query;
console.log(process.env.FAUNA_DB_ID);
const databaseID = process.env.FAUNA_DB_ID;

export { client, q, databaseID };
Solution

  • For a CRA app (making a guess based on the REACT_APP_FAUNA_API_KEY variable), env vars will only be exposed to the front-end if they start with REACT_APP_

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

    If you rename the variable to REACT_APP_FAUNA_DB_ID, does it return correctly?