React运行报Element type is invalid错误，开发日历组件时如何解决？

报错核心原因 #

该报错本质是React渲染时识别到你传入的组件不是合法的组件类型：要么是内置DOM标签对应的字符串，要么是自定义组件对应的类/函数，但你现在传入的是个对象，90%以上的场景都是导入导出写法不匹配导致的。

具体排查步骤 #

• 检查AddEventModal组件的导入导出一致性
  你当前代码中是默认导入写法import AddEventModal from "./AddEventModal";，如果AddEventModal.jsx中是用命名导出的写法export const AddEventModal = () => {}，就会导致导入的结果是个空对象，直接触发该报错。
  解决方案：两种写法二选一保持一致即可：

  1. 把AddEventModal的导出改为默认导出：export default AddEventModal
  2. 把导入改为命名导入：import { AddEventModal } from "./AddEventModal";

• 检查FullCalendar依赖的导入兼容性
  部分版本的@fullcalendar/react存在ESM导出兼容问题，你可以在导入语句后加一行打印验证：console.log(FullCalendar)，如果输出结果是包含default属性的对象，说明你的构建工具没有自动识别默认导出，可尝试修改导入写法：

  // 修改为兼容写法
  import FullCalendar from '@fullcalendar/react/dist/vdom'
  // 或者
  import * as FullCalendar from '@fullcalendar/react'
  

• 检查Calendar组件自身的导入是否正确
  如果你在其他业务文件中引用Calendar组件时，用了命名导入写法import { Calendar } from './Calendar'，但当前Calendar.jsx是默认导出export default Calendar，也会触发同样的报错，修改导入写法为默认导入即可：import Calendar from './Calendar'

快速定位方法 #

你可以先把返回值里的<FullCalendar />和<AddEventModal />都注释，只返回<div>测试内容</div>，如果项目能正常启动，说明问题就出在这两个依赖组件的导入上，再逐一放开注释就能精准定位出问题的组件。

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