dotenv 在 mern stack app 的客户端文件夹中不起作用

Question

我有 mern stack 应用程序。我使用 dotenv 来隐藏密钥。它在后端工作，但是当我在客户端文件夹中使用它时，它不起作用。

我的文件夹结构。

dotenv 安装在后端 package.json 中。（不在客户端）。但是当我也安装客户端时，它没有用。顺便说一下，我用 npx react-react-app

创建了我的客户端

我的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.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)

Answer 1

好的，我们通过@A7x 了解了问题所在。

如果 .env 文件位于其工作目录之外，即使使用 dotenv 和 path.resolve

，React 也无法访问它们

一个单独的 .env 专用于 React 需要直接在它的根中，变量需要以 REACT_APP_ 为前缀并且不需要调用 require("dotenv").config()

请务必在 changing/creating 您的 .env 文件时重新启动服务器，否则不会反映更改。

dotenv 在 mern stack app 的客户端文件夹中不起作用

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

reactjs

mern

dotenv