Блог

У меня есть приложение mern stack. Я использую dotenv для сокрытия ключей. Он работает в бэкэнде, но когда я использую его в папке клиента, он не работает.

Моя структура папок.

dotenv устанавливается в package.json серверной части. (не в клиенте). Но когда я установил также клиент, он не работал. Кстати, я создал своего клиента с помощью npx react-react-приложения

мой 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;  

это работает, когда я использую его в своей server.js для другой переменной. Это мое server.js

 require('dotenv').config()  mongoose.connect( process.env.MONGODB_STRING,{  useNewUrlParser: true,  useUnifiedTopology: true })  

Это мой файл .env

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

моя ошибка, которую я получаю после использования path.

 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.lt;computedgt; @ 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)  

Итак, мы выяснили с @A7x, в чем была проблема.

React не может получить доступ к файлам .env, если они находятся за пределами его рабочего каталога, даже при использовании dotenv и path.resolve

Отдельный .env , выделенный для реакции, необходим непосредственно в корне, переменные должны иметь префикс, REACT_APP_ и нет необходимости вызывать require("dotenv").config()

Обязательно перезапускайте сервер при каждом изменении/создании файла .env, иначе изменения не будут отражены.