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';