ReferenceError: document is not defined in NextJs when refresh page

Question

got error ReferenceError: document is not defined when try refresh-page

I try to make some component with react-quill and call that component in a page

my component :

import React, { useState } from 'react'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'

const RichTextEditor = () => {
    if (typeof window !== "undefined") {
        console.log("OK")
    }
    const [body, setBody] = useState('')

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

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

export default RichTextEditor;

Answer 1

You have to use dynamic import because looks like that package does not support server-side rendering.

import dynamic from 'next/dynamic'
const ReactQuillComponent = dynamic(() => import("react-quill"), { ssr: false });

Now use ReactQuillComponent in jsx