Hey everyone, just wanted to share this with you. So I've been trying to find rich editors that were compatible with NextJS. Couldn't find any but I found a way to get ReactQuill working.
Import dynamic
import dynamic from 'react/dynamic'
After that import ReactQuill using dynamic
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
Now you can easily use it!
Example:
import { useState } from "react";
import dynamic from 'next/dynamic';
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import 'react-quill/dist/quill.snow.css';
function App() {
const [value, setValue] = useState('')
return(
<ReactQuill value={value} onChange={setValue}/>
)
}
export default App;
I hope this helps π
Discussion (11)
Arigato Guzaimas
Thanks a lot! You saved my time!
Thank you! This is very helpful.
How do you import ReactQuill modules (quill-image-resizing -module) on the dynamic imports ?
thanks you ! this help me lot
Server Error
TypeError: Quill.register is not a function
This error happened while generating the page. Any console logs will be displayed in the terminal window.
dev-to-uploads.s3.amazonaws.com/up...
dev-to-uploads.s3.amazonaws.com/up...
Can you show me how you imported React-quill?
Thank you!! This helped me :)
can not use ref for image upload handler
Thank you very much
toolbar is appearing twice. i don't know how to fix it.. i am using quill inside form element