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

Question

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 (
    <div>
        <QuillNoSSRWrapper
            className={styles.quillTextArea}
            onChange={handleTextChange}
        />
    </div>
)

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?

Answer 1

Sorry, my bad! BlotFormatter is the default import.

import BlotFormatter from 'quill-blot-formatter';