React报错Element type is invalid为undefined如何解决

本地开发运行React项目时，控制台抛出如下报错：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

报错本质是React渲染阶段拿到的待渲染元素是undefined，不符合渲染规则：合法的渲染元素要么是对应浏览器内置标签的字符串（如div、input），要么是开发者自定义的函数/类组件。

该报错几乎都是组件引用环节出错导致，按优先级从高到低排查：

• 核对导入、导出语法是否匹配
  ES模块的默认导出、具名导出语法不能混写：
  • 组件用export default默认导出时，导入语句不能加花括号，正确写法为import Xxx from './xxx'
  • 组件用export具名导出时，导入语句必须加花括号，正确写法为import { Xxx } from './xxx'
    语法不匹配时导入得到的变量就是undefined，渲染时直接触发报错。直接对照App.js及关联组件文件的导入、导出语句修正即可。
• 核对组件命名与拼写
  React自定义组件强制要求首字母大写，导入时的组件名必须和导出声明的命名完全一致，拼写错误、大小写不对都会导致导入值为undefined。
• 排查循环依赖问题
  如果两个组件文件互相导入对方，模块加载阶段会出现其中一个组件尚未完成初始化的情况，此时拿到的组件值也是undefined。把两个组件共用的逻辑抽离到独立文件，打破循环引用链路即可修复。

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