NextJS导入widget目录组件时报Element type is invalid错误

Error: Element type is invalid: expected a string (for built-in components) or 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.

核心原因1：React导入写法错误 #

你组件代码第一行的导入写法不符合react包的导出规则：

// 错误写法
import { React, Component } from "react";

React是react包的默认导出项，无法通过解构赋值获取，该写法会导致拿到的React值为undefined，类组件的定义依赖React上下文，最终触发类型校验失败。

解决方法 #

修正导入写法，分开导入默认的React和命名导出的Component：

// 正确写法
import React, { Component } from "react";

核心原因2：导入组件时混淆了默认导出和命名导出规则 #

你当前的组件是通过export default导出的默认组件，如果在主首页index.js中使用了命名导入的写法，就会拿到undefined：

// 错误导入写法（对应export default会拿到undefined）
import { GetNotified } from './widget/GetNotified';

解决方法 #

使用默认导入的写法引入组件，注意路径要匹配你实际的组件文件路径：

// 正确导入写法
import GetNotified from './widget/GetNotified';

其他排查方向 #

如果上述两种方法都没有解决问题，检查你组件中导入的NotifiedModal组件是否存在导出错误，确认该组件是否正确完成导出、导入路径是否匹配。

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