React读取.env配置的Supabase环境变量为undefined如何解决

问题表现 #

基于Create React App搭建的前端项目，将Supabase服务地址、匿名访问密钥存入环境变量文件后，在App组件的useEffect钩子中打印process.env.REACT_APP_SUPABASE_URL，控制台输出undefined，无法正常初始化Supabase客户端拉取表数据。

涉及的项目文件内容：

App.js #

import React, { useEffect } from "react";
import ButtonsSection from "./ButtonsSection";
import Header from "./Header";
import InputsSection from "./InputsSection";
import ResultsSection from "./ResultsSection";

export default function App() {
  useEffect(() => {
    console.log(process.env.REACT_APP_SUPABASE_URL);
  }, []);

  return (
    <div>
      <Header />
      <InputsSection />
      <ButtonsSection />
      <ResultsSection />
    </div>
  );
}

原自定义环境变量文件（Database.env） #

REACT_APP_SUPABASE_URL='https://**********.supabase.co'
REACT_APP_SUPABASE_ANON_KEY='***************.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InF2bW56a2xka25hZG1wcmZtc3JqIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTU0MDQ4NDQsImV4cCI6MTk3MDk4MDg0NH0.Th_x*******************************'

排查与修复步骤 #

按优先级从高到低逐一验证：

• 修正环境变量文件命名与存放路径
  CRA脚手架默认只会自动加载**项目根目录（与package.json同级）**下固定命名的环境文件，自定义命名的Database.env不会被识别。需要将文件重命名为对应场景的规范名称：
  • 全环境通用配置：.env
  • 本地开发私有配置（不提交Git）：.env.local
  • 测试环境配置：.env.test
  • 生产环境配置：.env.production
    把Supabase相关的两个环境变量迁移到正确命名、正确路径的文件中即可解决90%的同类问题。
• 重启本地开发服务
  CRA仅在服务启动的构建阶段读取环境变量，新增/修改env文件后，热更新不会同步新的环境变量。必须先终止当前运行的npm start/yarn start进程，重新执行启动命令，变量才会被注入到运行时。
• 校验变量命名前缀
  出于安全考虑，CRA只会把以REACT_APP_为前缀的自定义变量暴露给客户端代码，你当前使用的两个变量前缀符合规则，这一步可快速排除。如果后续新增其他客户端环境变量，必须加此前缀，否则会读取不到。
• 修正env文件语法
  env文件中变量值不需要额外包裹单引号、双引号，包裹后引号会被作为值的一部分读取，虽然不会直接触发undefined问题，但后续请求Supabase时会出现地址不匹配、鉴权失败的问题，建议调整为无引号格式：

  REACT_APP_SUPABASE_URL=https://**********.supabase.co
  REACT_APP_SUPABASE_ANON_KEY=***************.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InF2bW56a2xka25hZG1wcmZtc3JqIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTU0MDQ4NDQsImV4cCI6MTk3MDk4MDg0NH0.Th_x*******************************
  

• 验证注入结果
  完成以上步骤重启服务后，可以在组件中打印整个process.env对象，查看所有可用的运行时变量，确认目标变量是否正常加载。

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