React导入错误求助：导入client时出现undefined报错

针对你遇到的问题，给出几个具体排查方向：

• 确认client的导出与导入匹配
  打开lib/client.js，明确导出方式：

  • 如果是命名导出：export const client = /* 你的代码 */，那Hero.jsx里必须用import { client } from '[正确相对路径]'
  • 如果是默认导出：export default client，那Hero.jsx里得用import client from '[正确相对路径]'，不能加花括号
    别同时混用两种导出方式，避免模块识别混乱。

• 检查Hero.jsx的导入路径是否正确
  对比index.js和Hero.jsx的文件位置：
  比如index.js在根目录，Hero.jsx在components/Hero.jsx，那导入client的路径应该是../lib/client，而非./lib/client。路径错误会导致导入到未定义的模块。

• 排查是否误将client当作React组件渲染
  你的报错提示“元素类型无效”，大概率是在Hero.jsx里把client当成了JSX组件使用（比如写了<client />），但client本身不是React组件（可能是API客户端、普通对象/函数）。如果是这种情况，去掉组件式的渲染写法，直接调用client的方法即可。

• 检查循环导入问题
  确认lib/client.js有没有间接导入Hero.jsx，或者Hero.jsx和client.js之间形成了循环引用，这种情况会导致模块加载时client还未被初始化，出现undefined。

• 清理缓存并重启开发服务器
  React的开发服务器可能缓存了旧的模块导出信息，修改导出后未生效。关掉服务器，删除node_modules/.cache（若使用Create React App），再重新启动试试。

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