React项目chat组件无法访问process.env 同目录其他页面访问正常

你的chat组件文件顶部导入了自定义模块的process对象，直接覆盖了打包工具（比如CRA内置的webpack）注入的全局process对象，导致你代码中访问的process.env实际是读取你自定义process对象的env属性，而非预设的环境变量。
对应的冲突代码是这一行：

import { process } from "../../store/action/index";

account、checkout页面没有导入同名的自定义process对象，所以可以正常读取环境变量。

推荐两种可选方案，优先选第一种避免后续命名冲突：

• 方案1：重命名自定义导入的process
  将导入语句改为别名，同时调整调用的地方即可：

  // 导入时重命名
  import { process as dispatchProcessAction } from "../../store/action/index";
  // 原来调用process的地方替换成别名
  const dispatchProcess = (encrypt, msg, cipher) => {
    dispatch(dispatchProcessAction(encrypt, msg, cipher));
  };
  

• 方案2：明确指定全局process对象
  如果你不想修改自定义process的变量名，访问环境变量时明确指向全局对象即可：

  // 把原来的process.env改成window.process.env
  axios.get(`${window.process.env.REACT_APP_SERVER_URL}/users/isLoggedIn`, {
    // 其余配置不变
  })
  

补充说明：你当前用的环境变量前缀是REACT_APP_，符合Create React App的环境变量命名规则，这部分不需要调整。

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