error - ReferenceError: document is not defined NextJS

Question

I'm getting an error message like this

error - ReferenceError: document is not defined

Why is this? I've never had an error like this so I'm really confused. Please help for the seniors there.

My code =

import { useState } from "react";
import dynamic from 'next/dynamic';
import { Quill } from "react-quill";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import toolbarOptions from "./toolbar";

import 'react-quill/dist/quill.bubble.css';
const BubbleTheme = Quill.import("themes/bubble");

class ExtendBubbleTheme extends BubbleTheme {
  constructor(quill, options) {
    super(quill, options);

    quill.on("selection-change", (range) => {
      if (range) {
        quill.theme.tooltip.show();
        quill.theme.tooltip.position(quill.getBounds(range));
      }
    });
  }
}

Quill.register("themes/bubble", ExtendBubbleTheme);

import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Quill Editor</h1>
        <ReactQuill
          theme="bubble"
          placeholder="Compose an epic..."
          modules={{ toolbar: toolbarOptions }}
        />
    </div>
  )
}

Answer 1

Ran into this same issue. Using a Next Dynamic Import with this functional component implementation works like a charm:

import { useState, useMemo } from "react";
import dynamic from "next/dynamic";

const YourComponent = () => {
  const [value, setValue] = useState("");
  const ReactQuill = useMemo(() => dynamic(() => import('react-quill'), { ssr: false }),[]);

  return (
    <div>
      {/*... */}
      <ReactQuill theme="snow" value={value} onChange={setValue} />
    </div>
  );
};


export default YourComponent;