通过next/dynamic导入时，quill-blot格式化程序未向react-quill注册，并一直显示正在加载

Question

我制作了一个功能组件，其中我已经向react-quill注册了quill-blot-formatter，并将blotFormatter添加到了模块列表中。然后我在我想要的页面上用next/dynamic导入了这个模块。

自定义函数：

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 = [...];

我在react-quill中调用默认的ReactQuill导出，如下所示：

export default function QuillCustom({onChange}) {
    return (
        <ReactQuill
            modules={modules}
            formats={formats}
            theme="snow"
            onChange={onchange}
            readOnly={false}
        />
    );
}

在Nextjs页面组件上，我这样调用它：

const QuillNoSSRWrapper = dynamic(() => import('../Components/quillComponent'), {
    ssr: false,
    loading: () => <p>Loading...</p>,
})

return (
    <div>
        <QuillNoSSRWrapper
            className={styles.quillTextArea}
            onChange={handleTextChange}
        />
    </div>
)

现在，问题是，在页面加载之后，在const QuillNoSSRWrapper中声明的loading...属性会显示在屏幕上，并永远留在那里。羽毛笔编辑器不会出现。

我尝试在自定义模块上注释这一行：Quill.register("modules/blotFormatter", BlotFormatter);，然后出现了quill编辑器。blotFormatter模块没有注册到奎尔吗？那我该怎么注册呢？

Answer 1

对不起，是我的错！BlotFormatter是默认的导入。

import BlotFormatter from 'quill-blot-formatter';