Closed andylacko closed 6 years ago
Are you server-side rendering? https://github.com/zenoamaro/react-quill/issues/185
I am using nextjs, so yes
OK, #185 should contain everything you need 😄
If you're stumbling upon this, go straight to https://github.com/zenoamaro/react-quill/issues/122 instead of #185. #185 just forwards you to https://github.com/zenoamaro/react-quill/issues/122.
Hi, Add { ssr: false } to stop server side rendering in dynamic import.
const ReactQuill = typeof window === 'object' ? require('react-quill') : () => false;
// Use ReactQuill as desired
<ReactQuill value={value} onChange={handleChange} />
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
Don't forget to import dynamic from 'next/dynamic' like I did for MuhammadMinhaj's answer to work!
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
React Quill Rendering Twice ??
how to fix it?
const ReactQuill = dynamic(import('react-quill'), { ssr: false})
Try This.
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)
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)
const ReactQuill = typeof window === 'object' ? require('react-quill') : () => false;
Tks. I work for me
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
make sure include "use client" at the top of the file
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.
const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });
greats work like a charm
const ReactQuill = typeof window === 'object' ? require('react-quill') : () => false;
// Use ReactQuill as desired
It worked perfectly Thank you