Search code examples
reactjsmerndotenv

dotenv doesn't work in client folder in mern stack app

I have mern stack app. I use dotenv to hiding keys. It's working in backend, but when I use it in client folder, it doesn't work.

My folder structure.

enter image description here

dotenv is installed in package.json of backend. (not in client). But when I installed also client, it didn't work. By the way, I created my client with npx react-react-app

my firebase.js

import firebase from 'firebase/app';
import "firebase/auth";
require('dotenv').config()

export const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
}

const app = firebase.initializeApp(firebaseConfig);

export const auth = app.auth();
export default app;

it works when I use it in my server.js for other variable. This is my server.js

require('dotenv').config()

mongoose.connect( process.env.MONGODB_STRING,{
    useNewUrlParser: true,
    useUnifiedTopology: true
})

This is my .env file

MONGODB_STRING=mongodb+srv://.....
REACT_APP_FIREBASE_API_KEY=.......

my error which I get after using path.resolve

DevTools failed to load source map: Could not load content for chrome-extension://nmibbjghlmdiafjolcphdggihcbcedmg/js.3bd8b779.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
log.js:24 [HMR] Waiting for update signal from WDS...
provider.ts:122 Uncaught t {code: 'auth/invalid-api-key', message: 'Your API key is invalid, please check you have copied it correctly.', a: null}a: nullcode: "auth/invalid-api-key"message: "Your API key is invalid, please check you have copied it correctly."[[Prototype]]: Error
Provider.getImmediate @ provider.ts:122
FirebaseAppImpl._getService @ firebaseApp.ts:136
firebaseAppImpl.<computed> @ firebaseNamespaceCore.ts:228
(anonymous) @ firebase.js:27
./src/firebase.js @ firebase.js:29
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
(anonymous) @ Signup.js:67
./src/contextAPI/authContext.js @ authContext.js:14
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
(anonymous) @ Footer.js:141
./src/components/Header.js @ Header.js:117
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
(anonymous) @ index.css:7
./src/App.js @ App.js:50
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
(anonymous) @ index.css?bb0a:82
./src/index.js @ index.js:9
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ Shoppingcard.scss?2b73:82
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 Uncaught Error: The error you provided does not contain a stack trace.
    at L (index.js:1)
    at Y (index.js:1)
    at index.js:1
    at index.js:1
    at o (index.js:1)
Solution

  • Okay so we figured out with @A7x what the problem was.

    React can't access .env files if they are outside of it's working directory even when using dotenv and path.resolve

    A seperate .env dedicated to React is needed in it's root directly, variables need to be prefixed with REACT_APP_ and there is no need to call require("dotenv").config()

    Make sure to restart your server whenever changing/creating your .env file else changes won't be reflected.