仅在使用归因时才会出现以下错误。 首先，当我渲染组件时一切正常，仅在刷新页面后才会出现错误。注释掉这些行：
const Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizes;
Quill.register(Size, true);
修复了问题，特别是 Quill.import 的问题。
如何添加字体大小而不破坏页面？
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;
我通过将组件导入包装在父元素上并禁用组件的服务器端渲染来解决这个问题
import dynamic from "next/dynamic";
const EmailTextInput = dynamic(() => import("./emailTextInput"), {
ssr: false,
});
export default function FormInputs() {
return (
<EmailTextInput emailText={newEmailValues.mailContent} />
);
}