Next.js引入suneditor-react报错：元素类型无效问题求助

错误原因 #

动态导入sunedior-react时，直接导入了整个模块对象而非其默认导出的组件，导致React无法识别该对象为有效的组件类型，从而抛出Element type is invalid错误。

修复方案 #

修改动态导入语句，明确提取模块的default导出：

import dynamic from "next/dynamic";
import 'suneditor/dist/css/suneditor.min.css'; // 导入Sun Editor的CSS文件

// 修复：提取模块的default导出
const SunEditor = dynamic(() => import("suneditor-react").then(mod => mod.default), {
  ssr: false,
});

const MyComponent = props => {
  return (
    <div>
      <p> My Other Contents </p>
      <SunEditor />
    </div>
  );
};
export default MyComponent;

说明 #

suneditor-react包的核心编辑器组件是默认导出，而next/dynamic直接导入包时返回的是包含所有导出项的模块对象。必须通过.then(mod => mod.default)明确获取默认导出的组件，才能让React正确识别并渲染。

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