React开发待办清单应用时出现React.jsx: type is invalid报错求助

报错原因 #

你的问题出在组件文件名和导入路径不匹配：
你定义ToDo组件的文件名为 ToDoItems.js（末尾带s），但在App.js中导入时写的路径是 ./components/ToDoItem（末尾不带s），React找不到对应文件，导入结果为空对象，不符合React要求的组件必须是字符串（内置标签）、类或函数的规则，因此抛出该错误。

解决方案 #

任选一种即可，推荐第二种保持命名统一，降低后续维护成本：

• 方案1：修改App.js导入语句
  将App.js中的导入行：

  import ToDoItem from './components/ToDoItem';
  

  改为：

  import ToDoItem from './components/ToDoItems';
  

  和现有文件名保持一致。
• 方案2：修改组件文件名
  将components目录下的ToDoItems.js重命名为ToDoItem.js，和组件名、现有导入路径保持一致。

同类报错通用排查思路 #

以后遇到同类报错可以优先检查三个点：

1. 导入路径和实际文件名是否完全匹配，注意大小写、拼写、特殊字符
2. 组件是否在定义文件中正确导出
3. 导入时是否混用了默认导出和命名导入的语法（默认导出不能加大括号导入，命名导出必须加大括号导入）

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