document is not defined

[andylacko]

[alexkrolick]

Are you server-side rendering? #185

[andylacko]

I am using nextjs, so yes

[alexkrolick]

OK, #185 should contain everything you need 😄

[AryanJ-NYC]

If you're stumbling upon this, go straight to #122 instead of #185. #185 just forwards you to #122.

[sshekhar336]

Hi,
Add { ssr: false } to stop server side rendering in dynamic import.

[ashisdeveloper]

const ReactQuill = typeof window === 'object' ? require('react-quill') : () => false;

// Use ReactQuill as desired

[MuhammadMinhaj]

In NextJS, you can use dynamic import to disable server-side rendering to fix this issue.
For example -
const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });

Thanks

[rhinehardtc]

Don't forget to import dynamic from 'next/dynamic' like I did for MuhammadMinhaj's answer to work!

[ninsau]

In NextJS, you can use dynamic import to disable server-side rendering to fix this issue. For example - const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });

Thanks

thanks! this works

[Coder-Devesh-Agarwal]

React Quill Rendering Twice ??

[cornnnnnnnnnnnnnnnn]

how to fix it？

[Saravanakumarkandasamy]

const ReactQuill = dynamic(import('react-quill'), { ssr: false})
Try This.

[MiguelMarroquin]

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)

[jjmss]

const ReactQuill = dynamic(import('react-quill'), { ssr: false}) Try This.

Wrapping the import within useMemo solved the issue for me (source: https://stackoverflow.com/a/74096771/12103912)

[LeeManh]

const ReactQuill = typeof window === 'object' ? require('react-quill') : () => false;

Tks. I work for me

[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)

I Have the same problem if someone can help

[MammadProMax]

make sure include "use client" at the top of the file

[tajkir-alam]

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

this helped me. don't forget to use 'useMemo' it will store the data otherwise it will render. and obviously, write the code inside of your react function component.

[yogithesymbian]

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

greats work like a charm

[ABEL-Dion]

const ReactQuill = typeof window === 'object' ? require('react-quill') : () => false;

// Use ReactQuill as desired

[ABEL-Dion]

It worked perfectly Thank you