React导入组件触发Element type is invalid错误如何解决

报错核心原因 #

这个报错本质是你导入的Header不是React接受的组件类型（内置组件字符串、类组件、函数组件），反而拿到了一个对象，常见诱因如下：

• 导入路径或文件名大小写不匹配：如果Header.js和App.js不在同级目录，或者文件名大小写和导入时写的不一致（比如文件是header.js，导入写了./Header），就会找不到目标文件，导入结果为空对象
• 导出导入方式不匹配：如果Header组件用的是命名导出（如export function Header(){}），导入时没有加花括号写成import { Header } from './Header'，就会拿到包含所有导出项的对象，而非组件本身
• 本地开发服务缓存异常：React开发服务的缓存问题也可能导致组件导出异常，触发该报错
• Header组件本身存在语法错误：如果组件代码有未捕获的语法问题，也会导致导出的内容不符合预期

对应解决步骤 #

1. 校验文件路径和大小写：确认Header.js和App.js处于同级目录，文件名大小写和导入语句中的拼写完全一致；如果Header放在子目录（比如components文件夹），需要把导入语句改成import Header from './components/Header'
2. 匹配导出导入规则：你当前Header用的是export default默认导出，App中用import Header from './Header'默认导入的写法是正确的，如果后续修改为命名导出，记得给导入的组件名加上花括号
3. 清理缓存重启服务：停掉当前运行的开发服务，删除项目下的node_modules/.cache文件夹，再重新执行启动命令（npm start或yarn start）即可
4. 检查Header组件语法：确认Header组件代码没有标签未闭合、括号不匹配等语法问题，你贴出的组件代码本身逻辑没有问题，可以排查下实际运行文件有没有笔误

报错截图：

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