react-quill 错误 [ReferenceError]：在 nextjs 中使用归因器后未定义文档

问：

我仅在使用归因器时遇到以下错误。 首先，当我渲染组件一切正常时，只有在刷新页面后才会发生错误。注释掉这些行：

const Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizes;
Quill.register(Size, true);

修复了 Quill.import 的 particullary 行问题。

如何以不会破坏页面的方式添加字体大小？

error Error [ReferenceError]: document is not defined
at Object.<anonymous> (/home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:7661:12)
at __webpack_require__ (/home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:36:30)
at Object.<anonymous> (/home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:1030:1)
at __webpack_require__ (/home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:36:30)
at Object.<anonymous> (/home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:5655:14)
at __webpack_require__ (/home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:36:30)
at Object.<anonymous> (/home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:10045:13)
at __webpack_require__ (/home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:36:30)
at Object.<anonymous> (/home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:11557:18)
at __webpack_require__ (/home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:36:30)
at /home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:79:18
at /home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:82:10
at webpackUniversalModuleDefinition (/home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:9:20)
at Object.<anonymous> (/home/pkarpinski/projects/content-generator/node_modules/quill/dist/quill.js:16:3)
at Module._compile (node:internal/modules/cjs/loader:1198:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
at Module.load (node:internal/modules/cjs/loader:1076:32)
at Function.Module._load (node:internal/modules/cjs/loader:911:12)
at Module.require (node:internal/modules/cjs/loader:1100:19)
at require (node:internal/modules/cjs/helpers:108:18)
at Object.<anonymous> (/home/pkarpinski/projects/content-generator/node_modules/react-quill/lib/index.js:43:31)
at Module._compile (node:internal/modules/cjs/loader:1198:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
at Module.load (node:internal/modules/cjs/loader:1076:32)
at Function.Module._load (node:internal/modules/cjs/loader:911:12)
at Module.require (node:internal/modules/cjs/loader:1100:19)
at require (node:internal/modules/cjs/helpers:108:18)
at Object.react-quill (/home/pkarpinski/projects/content-generator/.next/server/pages/creator.js:1174:18)
at __webpack_require__ (/home/pkarpinski/projects/content-generator/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/components/Editor/index.tsx:13:69)
at Object../src/components/Editor/index.tsx (/home/pkarpinski/projects/content-generator/.next/server/pages/creator.js:215:1)
at __webpack_require__ (/home/pkarpinski/projects/content-generator/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/components/Templates/BusinessMinute/TextEditor/TextEditorIntro/index.tsx:9:65)
at Object../src/components/Templates/BusinessMinute/TextEditor/TextEditorIntro/index.tsx (/home/pkarpinski/projects/content-generator/.next/server/pages/creator.js:402:1)
at __webpack_require__ (/home/pkarpinski/projects/content-generator/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/components/TemplateSwitcher/index.tsx:20:111)
at Object../src/components/TemplateSwitcher/index.tsx (/home/pkarpinski/projects/content-generator/.next/server/pages/creator.js:270:1)
at __webpack_require__ (/home/pkarpinski/projects/content-generator/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/components/Creator/SubjectForm.tsx:16:75)
at Function.__webpack_require__.a (/home/pkarpinski/projects/content-generator/.next/server/webpack-runtime.js:97:13)
at eval (webpack-internal:///./src/components/Creator/SubjectForm.tsx:1:21)
at Object../src/components/Creator/SubjectForm.tsx (/home/pkarpinski/projects/content-generator/.next/server/pages/creator.js:171:1)
at __webpack_require__ (/home/pkarpinski/projects/content-generator/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/pages/creator.tsx:31:90)
at Function.__webpack_require__.a (/home/pkarpinski/projects/content-generator/.next/server/webpack-runtime.js:97:13)
at eval (webpack-internal:///./src/pages/creator.tsx:1:21)
at Object../src/pages/creator.tsx (/home/pkarpinski/projects/content-generator/.next/server/pages/creator.js:446:1)
at __webpack_require__ (/home/pkarpinski/projects/content-generator/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2Fcreator&preferredRegion=&absolutePagePath=.%2Fsrc%2Fpages%2Fcreator.tsx&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D!:23:80)
at Function.__webpack_require__.a (/home/pkarpinski/projects/content-generator/.next/server/webpack-runtime.js:97:13) {

摘要：未定义 }

法典：

import React, { useState } from 'react';
import dynamic from 'next/dynamic';
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import 'react-quill/dist/quill.snow.css';
import { Quill } from 'react-quill';

const length = 14;
const factor = 20;

const fontSizes = new Array(length).fill(0).map((el, index) => (index + 1) * factor + 'px');

const Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizes;
Quill.register(Size, true);

const Editor = (props) => {
    const [editorHtml, setEditorHtml] = useState('');

    const handleChange = (html) => {
        setEditorHtml(html);
    }

    return (
        <ReactQuill
            style={{
                height: '1200px',
                width: '1200px',
                backgroundColor: 'white',
            }}
            onChange={handleChange}
            value={editorHtml}
            modules={Editor.modules}
            formats={Editor.formats}
            placeholder={props.placeholder}
        />
    );
}

Editor.modules = {
    toolbar: [
        [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
        [{ 'size': fontSizes }],
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
        [{ 'list': 'ordered' }, { 'list': 'bullet' },
        { 'indent': '-1' }, { 'indent': '+1' }],
        ['link', 'image', 'video'],
        ['clean']
    ],
    clipboard: {
        matchVisual: false,
    }
}

Editor.formats = [
    'header', 'font', 'size',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image', 'video'
]

export default Editor;