NextJs - ReactQuill ReferenceError: document is not defined

Mário Afonso — Fri, 02 Aug 2024 10:31:30 +0000

If you've ever tried to use ReactQuill's RichText, you've probably already faced this error:

ReferenceError: document is not defined

If so, today I bring you good news, I managed to suppress the error by disabling SSR only for the ReactQuill component as follows:

`import dynamic from 'next/dynamic'
ao invés de: import ReactQuill from “react-quill-new”, use o seguinte for a da função ou classe principal:
const DynamicHeader = dynamic(() =>  import("react-quill-new"), {  
ssr: false,
})
export default Mycomponent(){
  const [value, setValue] = useState<string>("");
return(
 /*ao inês de:
 <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}     />
Use o seguinte: */ 
<DynamicHeader
                theme="snow"
                value={value}
                onChange={setValue}
              />
}`

And that's it, if it doesn't work give me feedback, if it works, it's the same, thanks for visiting!

fonts:https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr

DEV Community: Mário Afonso

NextJs - ReactQuill ReferenceError: document is not defined