React集成Contentful时.env环境变量无法读取的问题

排查步骤及修复方案 #

• 确认.env文件的位置与命名
  确保.env文件放在项目根目录（和package.json同级），文件名必须是.env（开发环境默认），且变量名严格以REACT_APP_开头，示例写法：

  REACT_APP_SPACE_ID=你的space-id
  REACT_APP_ACCESS_TOKEN=你的access-token
  

  注意：变量赋值不要加多余引号（除非值包含空格），不要在等号前后添加空格。

• 重启开发服务器
  react-scripts仅在启动时加载环境变量，修改.env后必须停止当前npm start进程，重新启动服务才能让新的环境变量生效。

• 移除手动引入的dotenv依赖
  react-scripts已经内置了dotenv支持，手动安装或引入dotenv会导致冲突，引发polyfill错误。直接执行npm uninstall dotenv，并删除代码中所有import dotenv from 'dotenv'类的语句。

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

  npm install react-scripts@latest
  

• 验证环境变量是否加载
  在组件或项目入口文件中添加日志验证：

  console.log('Space ID:', process.env.REACT_APP_SPACE_ID);
  console.log('Access Token:', process.env.REACT_APP_ACCESS_TOKEN);
  

  重启服务后查看控制台输出，确认变量是否正常读取。

代码优化建议（非必填） #

你的client函数每次调用都会创建新的Contentful客户端，建议改为单例模式，避免重复创建实例：

import { createClient } from "contentful";

export const client = createClient({
  space: process.env.REACT_APP_SPACE_ID,
  accessToken: process.env.REACT_APP_ACCESS_TOKEN,
});

export const getRecipes = async () => {
  try {
    const entries = await client.getEntries({
      content_type: "recipe",
      select: "fields"
    });
    return entries;
  } catch(error) {
    console.log(`error fetch: ${error}`);
  }
}

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