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. 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 App

问题代码 #

App.js #

import React from 'react';
import { apiUrl, filterData } from "./data";
import Navbar from './components/Navbar';
import Cards from './components/Cards';
import Filter from './components/Filter'

const App = () => {
  return (
    <div>
      <Navbar/>
      <Filter 
        filterData = {filterData}
      />
     <Cards/>
    </div>
  )
}

export default App;

Navbar.js #

import React from 'react'

const Navbar = () => {
  return (
    <div>
      <nav>
        <h1>Top Courses</h1>
      </nav>
    </div>
  )
}

export default Navbar

Filter.js #

import React from 'react'

const Filter = ({filterData}) => {
  return (
    <div>
      {filterData.map((data) => {
        return (<button>
            {data.title};
        </button>)
      })}
   </div>
  )
}

export default Filter

错误原因分析 #

根据错误提示和代码，核心问题出在Cards组件的导入或导出环节：

• 你在App中使用默认导入import Cards from './components/Cards';，但如果Cards组件采用命名导出（如export const Cards = () => {...}），会导致导入的是包含命名导出的对象，而非组件函数，触发"got: object"错误。
• 另一种可能是Cards组件未正确导出，或者文件路径错误导致未加载到正确组件。

次要排查点：Filter组件逻辑正常，但如果data.js中的filterData不是数组类型，后续也可能引发错误，但当前组件类型错误的核心原因还是组件导入导出问题。

解决方案 #

1. 修复Cards组件的导入导出 #

• 打开./components/Cards.js文件：
  • 若组件是默认导出，确保末尾有export default Cards;，保持App中的导入方式不变；
  • 若组件是命名导出，将App中的导入改为import { Cards } from './components/Cards';。
• 同时确认Cards组件文件存在于正确目录下，路径拼写无错误。

2. 验证filterData数据格式 #

检查./data.js中的filterData是否为数组，示例格式如下：

export const filterData = [
  { title: "前端开发" },
  { title: "后端开发" },
  // 其他数据项
];

3. 辅助排查步骤 #

• 重启React开发服务器，清除模块缓存；
• 检查所有组件的导入路径，确保大小写与文件名一致（部分操作系统区分文件大小写）。

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