Teams Toolkit项目新增配置后process.env无法读取问题排查

可能的原因及解决方案 #

1. env-cmd与react-scripts版本不兼容 #

你的env-cmd为10.1.0版本，搭配的react-scripts是5.x版本。React Scripts 5+ 依赖的dotenv版本更新，旧版env-cmd可能存在兼容性问题，导致环境变量无法正确注入。

• 解决方法：迁移到官方维护的新版env-cmd包，执行以下命令：

  npm uninstall env-cmd
  npm install @hey-api/env-cmd --save-dev
  

  同时更新package.json中的脚本命令：

  "dev:teamsfx": "@hey-api/env-cmd --silent -f .localConfigs npm run start"
  

2. 变量命名不符合React Scripts规则 #

React Scripts默认只会注入以REACT_APP_开头的环境变量，如果你新增的变量没有这个前缀，会被自动忽略。

• 解决方法：修改.localConfigs和.env文件中的变量名，比如将MY_VAR改为REACT_APP_MY_VAR。

3. .localConfigs文件格式错误 #

检查配置文件格式是否符合env-cmd要求：

• 必须是纯键值对格式，无引号包裹（除非值包含特殊字符），示例：

  REACT_APP_MY_NEW_VAR=my-custom-value
  

• 确保文件中没有语法错误，比如多余的逗号、空格或注释格式错误。

4. 开发服务器缓存旧环境变量 #

React开发服务器会缓存环境变量，修改配置后可能不会立即生效。

• 解决方法：
  1. 完全关闭所有开发进程
  2. 删除项目根目录下的node_modules/.cache文件夹
  3. 重新执行npm run dev:teamsfx启动服务

5. 代码中缓存了旧变量值 #

如果在config.ts中使用了解构赋值提前获取环境变量，可能会缓存旧值，即使配置更新也不会同步。

• 错误示例：

  const { REACT_APP_MY_NEW_VAR } = process.env; // 会缓存初始值
  

• 正确写法：

  const myVar = process.env.REACT_APP_MY_NEW_VAR; // 每次访问都取最新值
  

6. Teams Toolkit配置覆盖 #

Teams Toolkit启动时会优先读取.fx/configs目录下的配置文件（如config.local.json），如果你的新变量未同步到这里，可能被工具自带的配置覆盖。

• 解决方法：将新变量添加到.fx/configs/config.local.json的env字段中。

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