React项目中单个.env.local环境变量返回undefined求助

以下是针对该问题的具体排查与解决步骤：

• 检查.env.local的变量定义格式
  确保变量定义无多余空格，正确格式为：

  REACT_APP_PROJECT_ID=你的项目ID
  

  等号两侧不能有空格，否则会被识别为变量名或值的一部分，导致无法正确读取。

• 重启开发服务器
  React仅在项目启动时加载环境变量，修改.env.local后必须完全重启开发服务器（停止当前服务后重新执行npm start或yarn start），新变量才会生效。

• 确认.env.local文件位置
  该文件必须放在项目根目录下（与package.json、src文件夹同级），若放在子目录中，React无法识别并加载其中的变量。

• 核对变量名拼写与大小写
  再次确认.env.local中的变量名是否与代码里的REACT_APP_PROJECT_ID完全一致（环境变量名区分大小写），排查是否存在笔误（比如把PROJECT_ID写成PROJECTID）。

• 检查是否被其他.env文件覆盖
  React加载环境变量有优先级顺序：.env.development.local > .env.local > .env.development > .env。如果其他环境配置文件（如.env.development）中也定义了REACT_APP_PROJECT_ID且值为空，会覆盖.env.local的配置，导致读取结果为undefined。

• 验证变量是否被加载
  在代码中添加console.log(process.env)，启动项目后查看控制台输出，确认REACT_APP_PROJECT_ID是否存在于输出对象中。若不存在，说明变量未被加载，回到前面步骤排查；若存在但值为空，检查.env文件中的赋值是否正确。

• 更新react-scripts版本
  旧版本react-scripts可能存在环境变量处理bug，执行以下命令更新到最新稳定版：

  npm update react-scripts
  # 或 yarn upgrade react-scripts
  

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