前后端读取.env环境变量返回undefined报错问题排查

报错现象 #

后端服务启动时抛出Mongoose连接错误：

MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string. did not connect
PS C:\Users\manue\Documents\Development\recall_socialmedia\server>

同时前端Google登录组件无法读取配置的客户端ID，两类环境变量读取结果均为undefined。

核心问题原因 #

• 后端Node/Express服务未引入环境变量加载依赖，Node.js默认不会自动读取目录下的.env文件
• 前后端环境变量存放、命名规则错误：
  • 前后端为独立运行环境，前端代码编译后运行在浏览器端，无法读取后端服务目录下的配置文件，不能共用同一个.env
  • REACT_APP_是Create React App脚手架专属的环境变量前缀识别规则，仅对前端项目生效，后端服务不需要、也不识别这个前缀
• 配置文件存在无效占位符，且修改环境变量后未重启对应服务

分步修复方案 #

后端（Express服务）修复 #

1. 进入server目录，安装dotenv依赖用于加载.env配置：

npm install dotenv

2. 确认server目录下的.env文件和后端package.json处于同一层级，修改配置内容，移除前端相关变量、去掉后端变量的REACT_APP_前缀、删除所有**占位标记，最终内容参考：

MONGODB_CONNECTION_URL=替换为你的完整MongoDB连接串
PORT=5000

3. 修改后端入口index.js，在所有业务代码的最顶部添加dotenv加载语句，同时修正环境变量读取的键名：

// 这行必须放在所有import语句的最顶部
import 'dotenv/config';
import express from 'express';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
import cors from 'cors';

import postRoutes from './routes/posts.js';
import userRouter from "./routes/user.js";

const app = express();

app.use(express.json({ limit: '30mb', extended: true }))
app.use(express.urlencoded({ limit: '30mb', extended: true }))
app.use(cors());

app.use('/posts', postRoutes);
app.use("/user", userRouter);

// 对应修改后的环境变量键名
const CONNECTION_URL = process.env.MONGODB_CONNECTION_URL;
const PORT = process.env.PORT|| 5000;

mongoose.connect(CONNECTION_URL, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => app.listen(PORT, () => console.log(`Server Running on Port: http://localhost:${PORT}`)))
  .catch((error) => console.log(`${error} did not connect`));

mongoose.set('useFindAndModify', false);

前端（React项目）修复 #

1. 进入React前端项目根目录（和前端package.json、src文件夹同层级，不要放在server目录、不要放在src目录内），新建独立的.env文件，仅存放前端用到的环境变量：

REACT_APP_GOOGLE_CLIENTID=替换为你的完整Google客户端ID

2. 现有auth.js中GoogleLogin组件读取环境变量的写法无需修改，注意修改前端.env后必须完全停止React开发服务，重新执行npm start启动，Create React App只会在服务启动时一次性加载.env配置，运行中修改不会热更新生效。

验证检查清单 #

• 前后端.env文件分开放置，各自和本端的package.json处于同一目录层级
• 后端入口文件最顶部已添加dotenv加载语句
• 后端环境变量不带REACT_APP_前缀，前端环境变量保留REACT_APP_前缀
• 所有配置值无多余引号、空格、占位标记，连接串、客户端ID为完整有效值
• 修改配置后前后端服务均已完全重启

内容的提问来源于stack exchange，提问作者ManP22