Adding Quill Modules into ReactQuill in NextJS

I notice that there isn't a clear solution to adding Quill Modules into ReactQuill on NextJS yet. In this example, I am importing blotFormatter into Quill.

The concept here is that since Quill needs document to be defined, we only tell Next to load in Quill and blotFormatter the moment the page is rendered. Since UseEffect only runs the moment the page renders, so we will start our call for these clientside imports there.

We use promise to ensure that Quill is loaded, and blot formatter is loaded, to be resolved so that the Quill.register function will be available to us.

let quillModules = {
    blotFormatter: {
        // see config options below
    },
    toolbar: [
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ["bold", "italic", "underline", "strike", "blockquote"],
        [
            { list: "ordered" },
            { list: "bullet" },
            { indent: "-1" },
            { indent: "+1" },
        ],
        ["link", "image"],
        ["clean"],
    ],
}

let quillFormats = [
    "header",
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "list",
    "bullet",
    "indent",
    "link",
    "image",
]

export default function createDocument() {
    const [enableEditor, setEnableEditor] = useState(false)
    const [editorData, setEditorData] = useState("")

    const loadQuill = async () => {
        return new Promise(async (resolve, reject) => {
            const Quill = await require("react-quill").Quill
            const BlotFormatter = (await import("quill-blot-formatter")).default
            resolve({ Quill, BlotFormatter })
        })
            .then(({ Quill, BlotFormatter }) => {
                Quill.register("modules/blotFormatter", BlotFormatter)
                return
            })
            .then((value) => {
                setEnableEditor(true)
            })
    }

    useEffect(async () => {
        await loadQuill()
    }, [])

    return (
            <div className='m-2 text-xs text-white'>
                    {enableEditor ? (
                        <div className='bg-white'>
                            <ReactQuill
                                value={editorData}
                                onChange={setEditorData}
                                modules={quillModules}
                                formats={quillFormats}
                            />
                        </div>
                    ) : null}
            </div>
    )
}

Hopefully this hellps someone who struggles with this same problem as me!