NextJs页面刷新时出现ReferenceError: document is not defined错误求助

问题原因 #

react-quill依赖浏览器环境的document对象，若你的项目采用服务端渲染（SSR）或静态生成（SSG）模式，服务端执行代码时不存在document，初始化组件时就会触发该错误。你之前添加的window判断仅用于打印日志，并未阻止服务端渲染ReactQuill组件，因此无法解决问题。

解决方案 #

方案1：动态导入+客户端挂载判断 #

通过useEffect标记客户端环境，配合React的lazy和Suspense实现组件懒加载，确保仅在客户端渲染编辑器：

import React, { useState, useEffect, lazy, Suspense } from 'react'

const ReactQuill = lazy(() => import('react-quill'))
import 'react-quill/dist/quill.snow.css'

const RichTextEditor = () => {
  const [body, setBody] = useState('')
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  const handleBodyChange = (value) => {
    setBody(value)
  }

  if (!isClient) {
    return <div>加载编辑器中...</div>
  }

  return (
    <Suspense fallback={<div>加载编辑器中...</div>}>
      <ReactQuill value={body} onChange={handleBodyChange} />
    </Suspense>
  )
}

export default RichTextEditor;

方案2：Next.js专属动态导入（若使用Next.js） #

利用Next.js的dynamic函数关闭SSR，直接在客户端加载组件：

import React, { useState } from 'react'
import dynamic from 'next/dynamic'

const ReactQuill = dynamic(() => import('react-quill'), {
  ssr: false,
  loading: () => <div>加载编辑器中...</div>
})
import 'react-quill/dist/quill.snow.css'

const RichTextEditor = () => {
  const [body, setBody] = useState('')

  const handleBodyChange = (value) => {
    setBody(value)
  }

  return <ReactQuill value={body} onChange={handleBodyChange} />
}

export default RichTextEditor;

方案3：条件导入组件 #

仅在客户端环境下导入react-quill，避免服务端执行相关代码：

import React, { useState } from 'react'

let ReactQuill;
if (typeof window !== 'undefined') {
  ReactQuill = require('react-quill').default;
  require('react-quill/dist/quill.snow.css');
}

const RichTextEditor = () => {
  const [body, setBody] = useState('')

  const handleBodyChange = (value) => {
    setBody(value)
  }

  if (!ReactQuill) {
    return <div>加载中...</div>
  }

  return <ReactQuill value={body} onChange={handleBodyChange} />
}

export default RichTextEditor;

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