Next.js导入富文本编辑器时出现window/document未定义报错求助

核心原因 #

react-draft-wysiwyg 和 react-quill 这类富文本编辑器库，在模块导入阶段就会直接访问 window 或 document 等浏览器专属全局对象。如果你的Web应用基于服务端渲染（SSR）环境（比如Next.js），服务端执行代码时没有这些浏览器API，因此仅导入就会触发报错。

NoSsr组件无效的原因：它只能控制组件不在服务端渲染，但模块导入是在组件渲染之前的代码执行阶段，此时已经触发了访问浏览器对象的逻辑，所以无法解决问题。

解决方案 #

1. 动态导入（React 原生方案） #

使用 React.lazy 和 Suspense 实现客户端懒加载，确保仅在浏览器环境下加载编辑器模块：

import React, { lazy, Suspense } from 'react';
import { EditorState } from 'draft-js';

// 仅在客户端动态导入Editor组件
const DraftEditor = lazy(() => 
  import('react-draft-wysiwyg').then(module => ({ default: module.Editor }))
);

// 渲染时用Suspense提供加载占位
export default function YourComponent() {
  const [editorState, setEditorState] = React.useState(EditorState.createEmpty());
  
  return (
    <Suspense fallback={<div>加载编辑器中...</div>}>
      <DraftEditor
        editorState={editorState}
        onEditorStateChange={setEditorState}
      />
    </Suspense>
  );
}

2. 条件导入（手动判断浏览器环境） #

通过判断 window 是否存在，仅在客户端环境下导入模块：

import { EditorState } from 'draft-js';
import React from 'react';

// 仅在浏览器环境下加载Editor
let DraftEditor;
if (typeof window !== 'undefined') {
  const { Editor } = require('react-draft-wysiwyg');
  DraftEditor = Editor;
}

export default function YourComponent() {
  const [editorState, setEditorState] = React.useState(EditorState.createEmpty());
  
  return (
    <div>
      {/* 确保仅在Editor存在时渲染 */}
      {DraftEditor && (
        <DraftEditor
          editorState={editorState}
          onEditorStateChange={setEditorState}
        />
      )}
    </div>
  );
}

3. SSR框架专属方案（以Next.js为例） #

使用 next/dynamic 直接禁用该模块的服务端渲染：

import dynamic from 'next/dynamic';
import { EditorState } from 'draft-js';
import React from 'react';

// 禁用服务端渲染，仅在客户端加载
const DraftEditor = dynamic(
  () => import('react-draft-wysiwyg').then(module => ({ default: module.Editor })),
  { 
    ssr: false,
    loading: () => <div>加载编辑器中...</div>
  }
);

export default function YourComponent() {
  const [editorState, setEditorState] = React.useState(EditorState.createEmpty());
  
  return (
    <DraftEditor
      editorState={editorState}
      onEditorStateChange={setEditorState}
    />
  );
}

以上方案同样适用于react-quill，只需替换对应的导入路径和组件名称即可。

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