React读取REACT_APP_BASE_URL触发TypeError报错问题排查

核心报错1：Cannot read properties of undefined (reading 'REACT_APP_BASE_URL') 修复 #

这个报错是环境变量读取规则不匹配+配置写法错误导致，按以下两点排查：

• 匹配脚手架的环境变量读取规则
  • 如果你是用 Create React App（react-scripts）搭建的项目：CRA 环境变量挂载在process.env下，且只识别REACT_APP_前缀的变量，你现在用的import.meta.env是Vite构建工具的API，在CRA项目中本身就是undefined，需要把Axios配置里的baseURL改为：

    baseURL: process.env.REACT_APP_BASE_URL,
    

  • 如果你是用Vite搭建的项目：Vite默认只识别VITE_前缀的环境变量，且挂载在import.meta.env下，你现在用的REACT_APP_前缀不会被Vite加载，需要先把.env里的变量名修改为：

    VITE_APP_BASE_URL=http://localhost:3000/
    

    再把Axios配置里的读取代码改为：

    baseURL: import.meta.env.VITE_APP_BASE_URL,
    

• 修正.env文件写法
  你当前.env里等号和值之间加了多余空格，还额外给值套了双引号，会导致变量读取异常，不管用哪种脚手架，都要改成等号直接连接键值、无多余空格、值不加引号的格式。注意：修改.env文件后必须重启开发服务，新的环境变量才会生效。

接口调用代码隐藏bug修复 #

你当前写的GET请求有传参错误：ApiConstants.COMPANY.FIND_ALL是一个函数，你没有加括号执行它，传给axios的是函数本身而非路径字符串，即使环境变量问题修好，请求也会发送失败。修复后代码如下：

const companyResponse = async () => {
  const response = await customAxios.get(ApiConstants.COMPANY.FIND_ALL());
  // 如果接口直接返回公司列表数组，不需要额外套一层数组，直接赋值即可
  setCompanies(response.data);
}

第二个报错说明 #

Error in event handler: TypeError: Cannot destructure property 'bookmark_everywhere' of 'config' as it is undefined 这个报错和你的项目代码无关，是浏览器安装的书签类扩展注入的脚本报错，不影响业务代码运行，忽略或者禁用对应扩展即可。

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