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: object. 错误，核心原因基本都是组件的导出/导入不匹配，以下是具体排查和解决步骤：

• 严格匹配导出与导入方式

  • 默认导出（export default MyComponent）对应默认导入：import MyComponent from './MyComponent'，不能加花括号。
  • 命名导出（export const MyComponent = () => {}）对应命名导入：import { MyComponent } from './MyComponent'，必须加花括号。
  • 最常见的错误就是混用两种方式，比如默认导出却用命名导入，导致导入的是一个空对象而非组件本身。

• 确认组件文件正确导出

  • 检查组件定义文件，确保没有遗漏export关键字，比如只写了组件函数但没导出，会导致导入结果为undefined。
  • 避免错误导出对象，比如写成export default { MyComponent }，此时导入的是包含组件的对象，不是组件函数/类，直接使用就会触发错误。

• 检查第三方组件导入是否合规

  • 使用第三方库组件时，务必对照官方文档确认导入方式，比如react-router-dom的Link是命名导出，React.lazy包裹的组件则需要默认导出，不要凭经验猜测。

• 验证导入文件路径正确性

  • 路径拼写错误、层级错误会导致导入到非组件文件（比如配置文件、工具函数文件），进而触发该错误，仔细核对路径是否准确。

错误示例与修正 #

错误写法：

// MyComponent.jsx
export const MyComponent = () => <div>测试组件</div>

// App.jsx
import MyComponent from './MyComponent' // 命名导出误用默认导入

修正方式二选一：

// 方式1：改为默认导出
export default MyComponent

// 方式2：改为命名导入
import { MyComponent } from './MyComponent'

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