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: undefined. 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`.

相关文件原代码：

• index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

• App.js

import "./styles.css";
import {SubComponent} from "./components/Subcomponent";

export default function App() {
  return (
    <SubComponent/>
  );
}

• Subcomponent 组件

const HelloWorld = ()=>{ return(<p>Hello World !</p>)}
export default HelloWorld();

目录结构参考：

错误原因 #

报错核心是App渲染时拿到的SubComponent不是合法的组件类型（实际为undefined或非函数/类值），由3个代码错误共同触发：

• 导入导出语法不匹配：子组件使用默认导出（export default），但App.js中用了花括号形式的命名导入，该写法只会匹配文件中命名导出的SubComponent变量，找不到对应值时直接返回undefined。
• 组件导出方式错误：子组件写为export default HelloWorld();，加括号相当于提前执行了组件函数，导出的是函数返回的JSX节点，不是React要求的组件函数/类本身，就算导入正确也无法作为组件渲染。
• 组件命名不对应：子组件文件内定义的组件名为HelloWorld，全程没有定义名为SubComponent的变量，和App中要渲染的组件名完全不匹配。
• 路径解析风险：如果./components/Subcomponent指向文件夹，必须保证文件夹下存在入口文件index.js，否则模块解析失败也会导致导入值为undefined。

修复步骤 #

1. 修正子组件代码，统一命名、去掉错误的函数调用括号，使用正确的默认导出：
   将子组件文件（如果是文件夹结构则保存为components/Subcomponent/index.js，单文件结构则保存为components/Subcomponent.js）修改为：

const SubComponent = () => { 
  return <p>Hello World !</p>
}
// 注意：不要加()，必须导出组件函数本身
export default SubComponent;

2. 修正App.js的导入语句，匹配默认导出语法，去掉花括号：

import "./styles.css";
// 默认导出的组件导入时不需要加花括号，路径和文件位置保持一致即可
import SubComponent from "./components/Subcomponent";

export default function App() {
  return <SubComponent />
}

3. index.js原有代码逻辑正确，导入App的语法匹配，无需修改。

改完后刷新即可正常运行，页面会渲染Hello World !文本。 #

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