使用jodit-react时遇Cannot read properties of undefined (reading 'document')错误求助

这个错误的核心原因是Jodit编辑器依赖浏览器的document对象，若在服务端渲染（SSR）环境（如Next.js）中直接初始化组件，就会触发该错误。以下是具体解决步骤：

1. 仅在客户端环境渲染编辑器 #

方法一：动态导入并禁用SSR（适用于Next.js） #

通过动态导入组件并关闭服务端渲染，确保编辑器只在浏览器中加载：

import dynamic from 'next/dynamic';

// 动态导入JoditEditor，禁用SSR
const JoditEditor = dynamic(() => import('jodit-react'), {
  ssr: false,
  loading: () => <p>加载编辑器中...</p>
});

方法二：条件渲染判断浏览器环境 #

在组件中通过typeof window !== 'undefined'判断是否处于客户端，仅满足条件时渲染编辑器：

import { useState, useRef } from 'react';
import JoditEditor from 'jodit-react';

export default function EditorComponent() {
  const [state, setState] = useState({ content: '' });
  const editor = useRef(null);

  const handleContentChange = (contentHtml) => {
    setState(prev => ({ ...prev, content: contentHtml }));
  };

  // 服务端时返回加载占位
  if (typeof window === 'undefined') {
    return <div>加载编辑器中...</div>;
  }

  return (
    <JoditEditor
      ref={editor}
      value={state.content}
      onChange={handleContentChange}
    />
  );
}

2. 修正事件处理函数的错误用法 #

你用useMemo包裹handleContentChange是错误的，useMemo用于缓存计算值，缓存函数应使用useCallback：

import { useCallback } from 'react';

const handleContentChange = useCallback((contentHtml) => {
  setState(prev => ({ ...prev, content: contentHtml }));
}, []);

注：这一步是代码规范修正，不是导致document错误的直接原因，但能避免不必要的函数重渲染。

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