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

Question

我制作了一个已注册的功能组件，quill-blot-formatter并将react-quill其添加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 = [...];

我这样调用默认ReactQuill导出react-quill：

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>
)

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

我尝试评论这一行：Quill.register("modules/blotFormatter", BlotFormatter); 在自定义模块上，然后出现羽毛笔编辑器。blotFormatter模块没有在 Quill 上注册吗？那我怎么注册呢？

Answer 1

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

import BlotFormatter from 'quill-blot-formatter';