DEV Community

Cover image for NextJs - ReactQuill ReferenceError: document is not defined
Mário Afonso
Mário Afonso

Posted on

1

NextJs - ReactQuill ReferenceError: document is not defined

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}
              />
}`
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay