Next.js项目使用jodit-react报self is not defined错误的解决办法

这个错误的核心原因是Next.js的服务端渲染（SSR）环境里没有浏览器端的self全局对象，而jodit-react编辑器依赖该对象，直接导入会在服务端执行阶段触发报错。

解决步骤如下：

• 移除代码里直接导入JoditEditor的语句，改用Next.js提供的dynamic函数实现仅客户端渲染的动态导入，同时设置ssr: false禁用服务端渲染。
• 调整组件引用方式，确保编辑器只在浏览器环境中初始化。

修改后的完整代码：

import React, { useState, useRef } from "react";
import Dashborad from "./Dashborad";
import dynamic from "next/dynamic";

// 动态导入jodit-react，禁用SSR
const JoditEditor = dynamic(() => import("jodit-react"), {
  ssr: false,
  // 可选：加载时显示占位内容
  loading: () => <p>加载编辑器中...</p>
});

export default function edit() {
  const editor = useRef();
  const [content, setContent] = useState("");

  return (
    <Dashborad>
      <JoditEditor
        ref={editor}
        value={content}
        tabIndex={1}
        onBlur={(newContent) => setContent(newContent)}
        onChange={(newContent) => setContent(newContent)}
      />
    </Dashborad>
  );
}

额外说明：

• 动态导入时设置ssr: false会让组件完全在客户端加载，避免服务端执行时访问不存在的浏览器全局对象。
• 可选的loading参数可以优化用户体验，在编辑器加载完成前显示提示内容。

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