"ReferenceError: document is not defined"

[ericpeng1999]

 ⨯ ReferenceError: document is not defined
    at Array.forEach (<anonymous>)
    at [project]/src/app/design-library/your-designs/[template_id]/editor/TextEditor.tsx [app-ssr] (ecmascript) (src/app/design-library/your-designs/[template_id]/editor/TextEditor.tsx:3:0)
    at [project]/src/app/design-library/your-designs/[template_id]/editor/EditorPanel.tsx [app-ssr] (ecmascript) (src/app/design-library/your-designs/[template_id]/editor/EditorPanel.tsx:26:0)
    at [project]/src/app/design-library/your-designs/[template_id]/editor/page.tsx [app-ssr] (ecmascript) (src/app/design-library/your-designs/[template_id]/editor/page.tsx:3:0)
  1 | import { toastError } from "@/lib/toastLib";
  2 | import { debounce } from "lodash";
> 3 | import Quill, { Delta, EmitterSource, Range } from "quill";
  4 | import "quill/dist/quill.snow.css";
  5 | import React, {
  6 |   forwardRef, {
  digest: '2105077097'

I'm using React 19 and encountering a server-side error every time I refresh the page where Quill is used. Quill is implemented in a client component, and I'm using it for type specification with useRef and forwardRef. According to ChatGPT (though I haven't verified this myself), the import statements alone might be causing the issue by running on the server side. I could probably resolve this by dynamically importing Quill inside useEffect and replacing every instance where I use Quill for typing with any, but I'd prefer not to take that approach.

[leviwolfe]

I ran into similar difficulties using Quill in a Svelte application. Development went smooth, however builds failed due to the lack of document. The author of Svelte also recommended the unpleasant workaround of using a dynamic import, which can make initialization code harder to follow: sveltejs/kit#779 (comment)