Next.js单行批量导入多个组件报Element type is invalid错误

问题场景 #

我在Next.js项目中尝试通过单行语句将多个组件引入到页面中使用，项目组件结构如下图所示：

我在components目录下的index.js文件中编写了组件统一导入导出逻辑，代码如下：

import Header from "./Header/Header";
import Navbar from "./Navbar/Navbar";

const exportedObject = {
    Header,
    Navbar,
};

export default exportedObject;

随后在业务页面中按如下方式导入并使用组件：

import { Header, Navbar } from "../components";

<div>
    <Header title="about page" />
    <Navbar />
    <h1>About</h1>
    <p>THIS is the about page</p>
</div>

运行项目后持续收到如下报错：

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.

补充说明：单个组件文件采用如下导出方式编写：

export function Navbar() {
    return (
        <div>
            <h1>this is a navbar</h1>
        </div>
    );
}

报错原因 #

报错来自两处导入导出逻辑不匹配：

• components/index.js 采用默认导出的方式对外暴露包含组件的对象，但业务页面使用命名导入的语法解构取值，二者规则不匹配，导入的Header、Navbar实际为undefined
• 单个组件（如Navbar）本身采用export function的命名导出方式，但index.js中导入组件时使用了默认导入语法，本身拿到的组件值就是undefined

修复方案 #

直接修改components/index.js的逻辑，对齐导入导出规则即可，推荐使用支持摇树优化的命名重导出写法：

// components/index.js
// 对齐单个组件的命名导出规则，导入时加解构
import { Header } from "./Header/Header";
import { Navbar } from "./Navbar/Navbar";

// 直接对外做命名导出，不要包裹对象做默认导出
export { Header, Navbar };

修改完成后重启Next.js开发服务，原有业务页面的导入写法无需调整即可正常运行。

注意：不建议保留「默认导出组件对象」的写法，这种写法会导致打包工具无法自动剔除未使用的组件，增大最终产物体积。如果一定要用该写法，业务页面的导入逻辑需要改为先导入默认对象再手动解构：

import Components from "../components";
const { Header, Navbar } = Components;

内容的提问来源于stack exchange，提问作者beginnersLuck.css