React中process.env可打印全部变量，但部分Keycloak相关环境变量无法访问

问题描述 #

我有一个React应用，index.jsx中引入了KeycloakConstants.js里的keycloakBaseUrl。KeycloakConstants.js通过process.env获取KEYCLOAK_HOST_AND_PORT和KEYCLOAK_REALM来拼接这个URL，但这两个变量始终返回undefined，导致生成的keycloakBaseUrl变成undefined/realms/undefined。访问认证路由时触发OIDC错误：

Oops... Invalid response Content-Type: text/html; charset=utf-8, from URL: undefined/realms/undefined/.well-known/openid-configuration

控制台打印显示process.env能读取部分变量，但就是读不到这两个Keycloak相关的变量。另外我的.env文件里这两个变量都加了REACT_APP_前缀。

疑问 #

• 问题出在哪里？
• 是否需要在KeycloakConstants.js顶部添加内容来正确加载环境变量？

解决方案 #

• 检查变量名匹配：确保.env里的变量名和代码中读取的完全一致，比如.env里是REACT_APP_KEYCLOAK_HOST_AND_PORT，代码里就必须写process.env.REACT_APP_KEYCLOAK_HOST_AND_PORT，不能漏掉REACT_APP_前缀。
• 重启开发服务器：React在启动时才会加载环境变量，修改.env后必须重启本地开发服务，否则新变量不会生效。
• 确认.env位置：.env文件必须放在项目根目录（和package.json同级），放在子文件夹里React无法识别加载。
• 无需额外导入代码：Create React App会自动将带REACT_APP_前缀的环境变量注入到process.env中，不需要在KeycloakConstants.js顶部添加任何额外加载代码（比如dotenv相关导入）。
• 检查环境特定文件：如果使用了.env.development、.env.production这类环境专属配置文件，要确保当前运行环境对应的文件里存在目标变量，且变量名正确。

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