Document is not defined Next 13

[0xMazout]

          I made a component for the quill editor and render it dynamic , and client side.

"use client";
import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

import "react-quill/dist/quill.bubble.css";

function TextEditor({ value, name, handleQuillChange, label }) {
	return (
		<div className='flex flex-col mt-3'>
			<p className='mt-4 text-sm font-medium'>{label}</p>
			<ReactQuill
				className=' mt-1 px-2 rounded-xl border hover:scale-105 duration-300'
				value={value}
				onChange={handleQuillChange(name)}
				theme='bubble'
			/>
		</div>
	);
}

export default TextEditor;

Then I import it on a form that is rendered also "use client"

but I have this error:

ReferenceError: document is not defined
    at Object.eval (webpack-internal:///(sc_client)/./node_modules/quill/dist/quill.js:7656:12)
    at __nested_webpack_require_697__ (webpack-internal:///(sc_client)/./node_modules/quill/dist/quill.js:31:30)
    at Object.eval (webpack-internal:///(sc_client)/./node_modules/quill/dist/quill.js:1025:1)
    at __nested_webpack_require_697__ (webpack-internal:///(sc_client)/./node_modules/quill/dist/quill.js:31:30)
    at Object.eval (webpack-internal:///(sc_client)/./node_modules/quill/dist/quill.js:5650:14)
    at __nested_webpack_require_697__ (webpack-internal:///(sc_client)/./node_modules/quill/dist/quill.js:31:30)
    at Object.eval (webpack-internal:///(sc_client)/./node_modules/quill/dist/quill.js:10040:13)
    at __nested_webpack_require_697__ (webpack-internal:///(sc_client)/./node_modules/quill/dist/quill.js:319:20)
    at eval (webpack-internal:///(sc_client)/./node_modules/quill/dist/quill.js:11:3)
    at (sc_client)/./node_modules/quill/dist/quill.js (D:\Coding\NEXTJS\jjudit_nextjs13\.next\server\_sc_client_node_modules_react-quill_lib_index_js.js:909:1)
    at __webpack_require__ (D:\Coding\NEXTJS\jjudit_nextjs13\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./node_modules/react-quill/lib/index.js:43:31)
    at (sc_client)/./node_modules/react-quill/lib/index.js (D:\Coding\NEXTJS\jjudit_nextjs13\.next\server\_sc_client_node_modules_react-quill_lib_index_js.js:920:1)
    at __webpack_require__ (D:\Coding\NEXTJS\jjudit_nextjs13\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__.t (D:\Coding\NEXTJS\jjudit_nextjs13\.next\server\webpack-runtime.js:73:38)           at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Originally posted by @MiguelMarroquin in #292 (comment)

I have the same problem of this guy .. If some one can help ?

[0xMazout]

Ok i have found the solution if you encapsulate your component into another think to import dynamically all the chain
Dynamic Import:

• React Quil
• Your component encapsulated

My React Quill Component :

export function RichTextEditor(props: Props) {
	const ReactQuill = useMemo(
		() => dynamic(() => import("react-quill"), {ssr: false}),
		[],
	);
	ReactQuill.register("modules/imageResize", ImageResize);
	// Quill.register("modules/imageResize", ImageResize);

	const handleChange = (value: string) => {
		props.form.setValue("description", value);
	};
	const modules = {
		toolbar: [
			["bold", "italic", "underline", "strike"], // toggled buttons
			["blockquote", "code-block"],

			[{header: 1}, {header: 2}], // custom button values
			[{list: "ordered"}, {list: "bullet"}],
			[{script: "sub"}, {script: "super"}], // superscript/subscript
			[{indent: "-1"}, {indent: "+1"}], // outdent/indent
			[{direction: "rtl"}], // text direction

			[{size: ["small", false, "large", "huge"]}], // custom dropdown
			[{header: [1, 2, 3, 4, 5, 6, false]}],

			[{color: []}, {background: []}], // dropdown with defaults from theme
			[{font: []}],
			[{align: []}],
			["link", "image"],

			["clean"], // remove formatting button
		],
		clipboard: {
			// toggle to add extra line breaks when pasting HTML:
			matchVisual: false,
		},
		imageResize: {
			parchment: Quill.import("parchment"),
			modules: ["Resize", "DisplaySize"],
		},
	};

	const formats = [
		"header",
		"bold",
		"italic",
		"underline",
		"strike",
		"blockquote",
		"list",
		"bullet",
		"indent",
		"link",
		"image",
		"video",
		"color",
		"code-block",
		"align",
		"formula",
	];

	return (
		<div>
			<ReactQuill
				className="w-3/4 mt-4 mx-auto text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-800 shadow-lg rounded-xl border border-slate-200 dark:border-slate-700"
				theme="snow"
				modules={modules}
				formats={formats}
				onChange={handleChange}
				value={props.form.getValues("description")}
			/>
		</div>
	);
}

export default RichTextEditor;

The other component :
const RichTextEditor = useMemo( () => dynamic( () => import("../../../../components/richTextEditor/richTextEditor"), {ssr: false}, ), [], );

[Minhnhat0408]

Hey, I just wonder how can your ReactQuill.register work cuz in my case it was undefined, the ReactQuill is a component.

[abdmun8]

Hey, I just wonder how can your ReactQuill.register work cuz in my case it was undefined, the ReactQuill is a component.

I am using this way and it works perfectly

Quill.register("modules/imageResize", ImageResize);

[raishudesu]

Quill.register("modules/imageResize", ImageResize);

i did this but document is still not defined whenever i use Quill.register("modules/imageResize", ImageResize);

[abdmun8]

Quill.register("modules/imageResize", ImageResize);

i did this but document is still not defined whenever i use Quill.register("modules/imageResize", ImageResize);

please attach your code

[realxpovoc]

Document is not defined again. How can i fix this problem?

"use client";
import { useEffect, useRef } from "react";
import { Quill } from "react-quill";
import dynamic from "next/dynamic";
import "react-quill/dist/quill.snow.css";

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
const ImageResize = dynamic(() => import("quill-image-resize-module-react"), { ssr: false });
const CustomToolbar = dynamic(() => import("./CustomToolbar"), { ssr: false });

import "../text-editor/text-editor.module.scss";

Quill.register("modules/imageResize", ImageResize);

const Size = Quill.import("formats/size");
Size.whitelist = ["extra-small", "small", "medium", "large"];
Quill.register(Size, true);

const Font = Quill.import("formats/font");
Font.whitelist = [
"arial",
"comic-sans",
"courier-new",
"georgia",
"helvetica",
"lucida",
];
Quill.register(Font, true);

const modules = {
toolbar: {
container: "#toolbar",
},
imageResize: {
parchment: Quill.import("parchment"),
modules: ["Resize", "DisplaySize"],
},
};

const formats = [
"font",
"size",
"bold",
"italic",
"underline",
"strike",
"blockquote",
"list",
"check",
"bullet",
"indent",
"link",
"image",
"align",
"color",
"background",
];

export default function TextEditor({ value, handleChange, forwardedRef }) {
const editorHtml = value;
const editorRef = useRef();

useEffect(() => {
if (forwardedRef) {
forwardedRef.current = editorRef.current.getEditor();
}
}, [forwardedRef]);

return (
<div
className="text-editor"
style={{
width: "100%",
height: "auto",
border: "1px solid #ccc",
}}
>

<ReactQuill
ref={(el) => (editorRef.current = el)}
value={editorHtml}
onChange={handleChange}
placeholder="Enter your text"
modules={modules}
formats={formats}
style={{
height: "500px",
}}
/>

);
}

[ayub48]

I have the same problem. The problem arises when I want to use The Size changer (let Size = Quill.import('formats/size');
Quill.register(Size, true);) and the following error is shown in the consloe:

⨯ node_modules/quill/dist/quill.js (7661:11) @ document
⨯ ReferenceError: document is not defined
at webpack_require (/Users/ayub/Desktop/articles/.next/server/webpack-runtime.js:33:42)
at webpack_require (/Users/ayub/Desktop/articles/.next/server/webpack-runtime.js:33:42)
at eval (./src/app/writeNewArticle/page.jsx:10:69)
at (ssr)/./src/app/writeNewArticle/page.jsx (/Users/ayub/Desktop/articles/.next/server/app/writeNewArticle/page.js:204:1)
at webpack_require (/Users/ayub/Desktop/articles/.next/server/webpack-runtime.js:33:42)
at JSON.parse ()
null

but without using the Size, there is no error.

This is my code:

"use client";
import React, { useState, useMemo } from "react";
import dynamic from "next/dynamic";
import { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css"; // Import Quill styles

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

export default function Home() {
const [value, setValue] = useState("");

const [content, setContent] = useState("");
let Size = Quill.import('formats/size');
Quill.register(Size, true);

Size.whitelist = [
"8px",
"10px",
"12px",
"14px",
"16px",
"18px",
];

const quillModules = {
toolbar: [
[{ size: Size.whitelist }, true],

  [{ header: [1, 2, 3, 4, false] }],

  ["bold", "italic", "underline"],
  [{ list: "ordered" }, { list: "bullet" }],
  ["link", "image"],
  [{ align: [] }],
  [{ color: [] }],
],

};

const quillFormats = [
"header",
"bold",
"italic",
"underline",
"strike",
"blockquote",
"list",
"link",
"image",
"align",
"color",
"size",
];

const handleEditorChange = (newContent) => {
setContent(newContent);
};

return (

  <div className=" pr-5 pl-5 flex flex-col w-full">
    <ReactQuill
      value={content}
      onChange={handleEditorChange}
      modules={quillModules}
      formats={quillFormats}
      theme="snow"
      className=" h-screen w-full mt-4"
      placeholder="Write Here"
    />
  </div>

</main>

);
}

[t-ashraf]

I've had similar issues in the past. This is what fixed is for me.

`
--------- ReactQuillWrapper.tsx --------------
import { Font, FontSize } from 'quill';
import MagicUrl from 'quill-magic-url';
import React from 'react';
import ReactQuill, { ReactQuillProps } from 'react-quill';
import { fonts, getTextSizes } from 'src/models/wysiwyg';

type Props = ReactQuillProps & {
reactQuillRef?: React.Ref;
};

const ReactQuillWrapper = (props: Props) => {
const { reactQuillRef, ...args } = props;
const quill = ReactQuill.Quill;
const font = quill.import('formats/font') as Font;
const size = quill.import('attributors/style/size') as FontSize;

font.whitelist = fonts.map((x) => x.id);
size.whitelist = getTextSizes().map((x) => x.sizeInPixels);

quill.register('modules/magicUrl', MagicUrl, true);
quill.register(font, true);
quill.register(size, true);
return <ReactQuill ref={reactQuillRef} {...args} />;
};
export default ReactQuillWrapper;

------- ReactQuillDynamicWrapper.tsx ------------
import dynamic from 'next/dynamic';

const ReactQuillDynamicWrapper = dynamic(() => import('./ReactQuillWrapper'), {
ssr: false
});
ReactQuillDynamicWrapper.displayName = 'ReactQuillDynamicWrapper';

export default ReactQuillDynamicWrapper;

`

The solution is essentially to wrap all of the 'react-quill' setup code in it's own component, then import that component dynamically in NextJs

[ayub48]

I've had similar issues in the past. This is what fixed is for me.

` --------- ReactQuillWrapper.tsx -------------- import { Font, FontSize } from 'quill'; import MagicUrl from 'quill-magic-url'; import React from 'react'; import ReactQuill, { ReactQuillProps } from 'react-quill'; import { fonts, getTextSizes } from 'src/models/wysiwyg';

type Props = ReactQuillProps & { reactQuillRef?: React.Ref; };

const ReactQuillWrapper = (props: Props) => { const { reactQuillRef, ...args } = props; const quill = ReactQuill.Quill; const font = quill.import('formats/font') as Font; const size = quill.import('attributors/style/size') as FontSize;

font.whitelist = fonts.map((x) => x.id); size.whitelist = getTextSizes().map((x) => x.sizeInPixels);

quill.register('modules/magicUrl', MagicUrl, true); quill.register(font, true); quill.register(size, true); return <ReactQuill ref={reactQuillRef} {...args} />; }; export default ReactQuillWrapper;

------- ReactQuillDynamicWrapper.tsx ------------ import dynamic from 'next/dynamic';

const ReactQuillDynamicWrapper = dynamic(() => import('./ReactQuillWrapper'), { ssr: false }); ReactQuillDynamicWrapper.displayName = 'ReactQuillDynamicWrapper';

export default ReactQuillDynamicWrapper;

`

The solution is essentially to wrap all of the 'react-quill' setup code in it's own component, then import that component dynamically in NextJs

Thanks a lot. Worked perfectly

[manacy-keyvalue]

Why does this error occur ? Could someone help me understand it better ? Does react-quill not support ssr ?