React运行报错Element type is invalid，该如何排查解决？

报错信息：
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of Home。

该错误说明Home组件渲染时用到了一个值为undefined的组件，不符合React对组件类型的要求，90%以上的情况是组件的导出和导入语法不匹配，按照以下步骤排查即可：

• 优先排查Content组件的导入导出
  你在Home.js中使用了命名导入语法引入Content：

import {Content} from '../components/Content/Content';

如果Content.js中是用export default导出的组件，导入时加了大括号就会拿到undefined，解决方案二选一：

• 保留Content的默认导出，把导入语句改成import Content from '../components/Content/Content';（去掉大括号）
• 保留Home中的命名导入写法，把Content组件的导出改成export const Content = () => {}（去掉default）
• 依次验证其他组件的导入导出匹配性
  依次检查Features、Hero两个组件，你在Home中用的是默认导入写法（无大括号），如果对应组件文件不是用export default导出的，同样会触发该错误，调整导入写法和导出方式对应即可。
• 验证HeroData导出正确性
  检查../data/HeroData文件中是否确实对heroOne、heroTwo、heroThree做了命名导出，和Home中的命名导入写法对应。

快速定位方法 #

你可以在Home.js的导入语句后加一行打印，快速定位出问题的组件：

console.log('Content:', Content, 'Features:', Features, 'Hero:', Hero, 'heroOne:', heroOne)

控制台打印为undefined的项就是出错的目标，直接调整对应导入导出即可。

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