using quill.import in nextjs doesnt work after refreshing

[karpinski1994]

I'm having the following error only when using attributors. Firstly when I render the component everything works, error occurs only after refreshing page. commenting out these lines:

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

fixes the issue, particullary line with Quill.import.

How can I add font sizes in the way that it will not break the page?

Error:
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) { digest: undefined }

Code:

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

[ButzkeGWG]

// import
const ReactQuill =
typeof window !== "undefined" ? require("react-quill") : () => false;

// load quill imports
useEffect(() => {
const AlignStyle = ReactQuill.Quill.import("attributors/style/align");
const BackgroundStyle = ReactQuill.Quill.import(
"attributors/style/background"
);
const ColorStyle = ReactQuill.Quill.import("attributors/style/color");
const DirectionStyle = ReactQuill.Quill.import(
"attributors/style/direction"
);
const FontStyle = ReactQuill.Quill.import("attributors/style/font");
const SizeStyle = ReactQuill.Quill.import("attributors/style/size");

ReactQuill.Quill.register(AlignStyle, true);
ReactQuill.Quill.register(BackgroundStyle, true);
ReactQuill.Quill.register(ColorStyle, true);
ReactQuill.Quill.register(DirectionStyle, true);
ReactQuill.Quill.register(FontStyle, true);
ReactQuill.Quill.register(SizeStyle, true);

}, []);