Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Quill-blot-formatter is not registering with react-quill on import through next/dynamic and keeps showing loading

I made a function component where I have registered quill-blot-formatter with react-quill and added the blotFormatter in the modules list. Then I imported this module with next/dynamic on the page I want.

The custom function:

import ReactQuill, { Quill } from 'react-quill';
import { BlotFormatter } from 'quill-blot-formatter';
import 'react-quill/dist/quill.snow.css'
Quill.register("modules/blotFormatter", BlotFormatter);
const modules = {
    blotFormatter: {
         overlay: {
             style: { border: '2px solid red',}
    toolbar: [...],
const formats = [...];
I am calling the default ReactQuill export from react-quill like this:
export default function QuillCustom({onChange}) {
    return (
        <ReactQuill
            modules={modules}
            formats={formats}
            theme="snow"
            onChange={onchange}
            readOnly={false}
And on a Nextjs page component I'm calling it like this:
const QuillNoSSRWrapper = dynamic(() => import('../Components/quillComponent'), {
    ssr: false,
    loading: () => <p>Loading...</p>,
return (
        <QuillNoSSRWrapper
            className={styles.quillTextArea}
            onChange={handleTextChange}
Now, the issue is that, after the page loads, the loading...  prop of declared in const QuillNoSSRWrapper shows on the screen and stays there forever. The quill editor doesn't appear.
I tried commenting this line: Quill.register("modules/blotFormatter", BlotFormatter);  on the custom module and then the quill editor appeared. Is the blotFormatter module not registering with Quill? How do I register that then?
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.