Quill-blot-formatter 未在通过 next/dynamic 导入时向 react-quill 注册，并一直显示加载

Question

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

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

我从react-quill 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); 在自定义模块上，然后出现羽毛笔编辑器。 blotFormatter模块是否未向 Quill 注册？ 那我怎么注册呢？

Answer 1

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

import BlotFormatter from 'quill-blot-formatter';