创建React项目文件时遭遇Element type invalid错误，求解决方案

这个错误的核心原因几乎都是组件导入导出不匹配，要么是组件未正确导出，要么是混淆了默认导入与命名导入的规则。

错误代码示例 #

// Button.js 组件文件
const Button = () => <button>测试按钮</button>;
// 此处未添加导出语句，或使用了命名导出但导入方式错误

// App.js
import Button from './Button'; // 若Button是命名导出，此处默认导入会导致报错

function App() {
  return (
    <div className="App">
      <Button />
    </div>
  );
}

export default App;

解决方案 #

• 确认组件已正确导出
  组件文件必须包含导出语句，两种常见导出方式：

  • 默认导出：export default Button;
  • 命名导出：export const Button = () => {...};

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

  • 对应默认导出的组件，导入时使用：import Button from './Button';
  • 对应命名导出的组件，导入时必须添加花括号：import { Button } from './Button';

• 排查拼写与路径错误
  确保导入的组件名称、文件路径拼写完全一致，React对文件名大小写敏感（如button.js与Button.js视为不同文件）

正确代码示例 #

场景1：默认导出 + 默认导入

// Button.js
const Button = () => <button>测试按钮</button>;
export default Button;

// App.js
import Button from './Button'; // 导入方式匹配，无报错

场景2：命名导出 + 命名导入

// Button.js
export const Button = () => <button>测试按钮</button>;

// App.js
import { Button } from './Button'; // 导入方式匹配，无报错

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