NextJs中React-Quill动态导入失效及document未定义报错求解决方案

在使用 Next.js 集成 React-Quill 时遇到如下报错：

• error - unhandledRejection: ReferenceError: document is not defined
  at Object. \node_modules\quill\dist\quill.js:7661:12

尝试过动态导入（设置ssr: false）以及在_app.js中通过typeof window !== "undefined"条件渲染，但都未解决问题，当前代码如下：

import React from 'react';
import { getSession } from 'next-auth/react';
import dynamic from 'next/dynamic';

const ReactQuill = dynamic(import('react-quill'), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
});

function EditService() {
  return <ReactQuill />;
}

export async function getServerSideProps(context) {
  const session = await getSession({ req: context.req });

  if (!session) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }
  return {
    props: {},
  };
}

export default EditService;

以下是几个可行的解决方案：

方案1：自定义封装 React-Quill 组件再动态导入 #

直接动态导入react-quill可能因依赖加载顺序失效，先封装一个仅客户端渲染的组件：

创建components/ReactQuillClient.js：

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // 必须导入编辑器样式

export default ReactQuill;

然后在页面中动态导入该封装组件：

import React from 'react';
import { getSession } from 'next-auth/react';
import dynamic from 'next/dynamic';

const ReactQuill = dynamic(() => import('../components/ReactQuillClient'), {
  ssr: false,
  loading: () => <p>Loading editor...</p>,
});

function EditService() {
  return <ReactQuill />;
}

export async function getServerSideProps(context) {
  const session = await getSession({ req: context.req });

  if (!session) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }
  return {
    props: {},
  };
}

export default EditService;

方案2：组件内部结合 useEffect 动态加载 #

如果方案1仍不生效，可在组件内用useEffect确保代码仅在浏览器环境执行：

import React, { useState, useEffect } from 'react';
import { getSession } from 'next-auth/react';

function EditService() {
  const [QuillEditor, setQuillEditor] = useState(null);

  useEffect(() => {
    const loadQuill = async () => {
      const { default: ReactQuill } = await import('react-quill');
      import('react-quill/dist/quill.snow.css'); // 异步加载样式
      setQuillEditor(ReactQuill);
    };

    loadQuill();
  }, []);

  if (!QuillEditor) {
    return <p>Loading editor...</p>;
  }

  return <QuillEditor />;
}

export async function getServerSideProps(context) {
  const session = await getSession({ req: context.req });

  if (!session) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }
  return {
    props: {},
  };
}

export default EditService;

方案3：适配 Next.js 13+ App Router #

若使用 Next.js 13+ App Router，需标记组件为客户端组件：

'use client'; // 必须添加该指令，标记为客户端组件
import React from 'react';
import dynamic from 'next/dynamic';

const ReactQuill = dynamic(() => import('react-quill'), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
});

function EditService() {
  return <ReactQuill />;
}

// App Router 中不再使用 getServerSideProps，权限控制改用服务器组件或 Middleware
export default EditService;

同时检查next.config.js是否有禁用客户端特性的配置，避免影响渲染。

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