问题

我的错误代码

----
你好，我想自定义Quill编辑器，就像Divider一样。但是，当我使用{Quill}时，出现了这样的错误。我该如何解决？

----

这是我的代码
```javascript
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());
            }}
        />
);
};

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());
                }}
            />
    );
};

答案1

得分: 1

// 将`react-quill`包在服务器端渲染页面时出现错误，是因为它使用了一些在服务器上不可用的浏览器API，比如`document`。可以通过在客户端使用`dynamic`导入来解决这个问题。

```js
import dynamic from 'next/dynamic';

const Quill = dynamic(() => import('react-quill'), {
  // 将ssr选项设置为`false`，这样它只会在客户端加载。
  ssr: false,
  // 在组件加载时，您还可以添加一个加载指示器。
  loading: () => <p>Loading ...</p>, 
})

希望对您有所帮助。

<details>
<summary>英文:</summary>

The `react-quill` package uses some browser APIs like `document` which are not available on the server. The error is caused when Next.js is Server-Side-Rendering the page. You can fix this by loading the package on the client only with a `dynamic` import.

Here, try to import like this instead:

```js
import dynamic from &#39;next/dynamic&#39;;

const Quill = dynamic(() =&gt; import(&#39;react-quill&#39;), {
  // 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: () =&gt; &lt;p&gt;Loading ...&lt;/p&gt;, 
})

Hope this helps.

答案2

得分: 0

add 'use client' at the first line and use dynamic for you to instantiate your Quill editor

const ReactQuill = useMemo(() => dynamic(() => import('react-quill'), { ssr: false }), []);