Comment importer {Quill} dans next js ? ou comment ajouter une balise hr dans l'éditeur Quill avec Next.js ?

Question

entrer la description de l'image ici

mon code d'erreur

---

Bonjour, je souhaite personnaliser l'éditeur Quill comme Divider.
mais, lorsque j'utilise la {Pointe}, j'ai une erreur de ce type.
Comment puis-je résoudre ce problème ?

---

Voici mon code

import { Quill } from 'react-quill';

const quill = Quill;

    const modules = useMemo(
        () => ({
            toolbar: {
                container:  /**/               
                handlers: {
                    hr: () => {
                        setHtmlContent((prev: string) => {
                            return prev + '<hr/>';
                        });
                    },
                },
            },
        }),

        []
    );

    const formats = [
        /**/
        'hr',
    ];

    return (           
            <ReactQuill
                theme="snow"
                modules={modules}
                formats={formats}
                value={htmlContent}
                onChange={(content, delta, source, editor) => {
                    setHtmlContent(editor.getHTML());
                }}
            />
    );
};

Answer 1

En react-quill Le paquet utilise certaines API du navigateur comme document qui ne sont pas disponibles sur le serveur. L'erreur est provoquée lorsque Next.js effectue le rendu de la page côté serveur. Vous pouvez corriger ce problème en chargeant le paquetage sur le client uniquement à l'aide d'un fichier dynamic l'importation.

Essayez plutôt d'importer comme ceci :

import dynamic from 'next/dynamic';

const Quill = dynamic(() => import('react-quill'), {
  // Set this to `false` so it is only loaded on the client.
  ssr: false,
  // You can also add an indicator while the component is loading.
  loading: () => <p>Loading ...</p>, 
})

J'espère que cela vous aidera.