ReactQuill component not appearing in NextJS 13.4.2 #897

gurbaaz27 · 2023-05-26T14:19:14Z

Having an issue with ReactQuill component not appearing in NextJS project using React-Quill v2.0.0, NextJS v13.4.2. After Loading, no component for Quill Editor renders on the screen, and it is surprising me.

Any help would be appreciated.

Code

'use client'

import dynamic from "next/dynamic"
import { FieldErrors } from "react-hook-form"

const QuillNoSSRWrapper = dynamic(import('react-quill'), {
    ssr: false,
    loading: () => <p>Loading ...</p>,
})
import 'react-quill/dist/quill.snow.css'

interface QuillEditorProps {
    id: string
    placeholder: string
    onChange: (arg0: string) => void
    value: string
    errors: FieldErrors
}

const modules = {
    toolbar: [
        [{ header: '1' }, { header: '2' }, { header: '3' }, { font: [] }],
        [{ size: [] }],
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
        [
            { list: 'ordered' },
            { list: 'bullet' },
            { indent: '-1' },
            { indent: '+1' },
        ],
        ['link'],
        ['clean'],
    ],
    clipboard: {
        // toggle to add extra line breaks when pasting HTML:
        matchVisual: false,
    },
}

const formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link'
]

const QuillEditor: React.FC<QuillEditorProps> = ({
    id,
    placeholder,
    onChange,
    value,
    errors
}) => {
    return (
        <div className='w-full relative block'>
            <QuillNoSSRWrapper
                theme="snow"
                placeholder={placeholder}
                defaultValue={value}
                value={value}
                onChange={(value) => onChange(value)}
                modules={modules}
                formats={formats}
            />
            {errors[id] ? (
                <p className="mt-2 text-pink-600 text-sm">
                    {errors[id]?.message?.toString()}
                </p>
            ) : <></>}
        </div>
    )
}

export default QuillEditor

The text was updated successfully, but these errors were encountered:

sohaibMan · 2023-05-29T15:05:33Z

did you find a solution ?

gurbaaz27 · 2023-05-29T15:47:59Z

Nope, hence switched to https://mantine.dev/others/tiptap/ instead.

moussaab-moulim · 2023-06-01T20:41:35Z

i have the same problem
i need to refresh the page every time for the editor to render

sohaibMan · 2023-06-02T08:16:20Z

is that in the app directory or the old pages directory?

yakkhasuraj · 2023-06-05T16:40:43Z

I had the same issue. Then I tried importing ReactQuill without lazy loading it worked for me.
Instead of this
const Quill = dynamic(import(react-quill), { ssr: false, loading: () => Loading ..., });

Try this
import Quill from 'react-quill';

sohaibMan · 2023-06-05T18:41:00Z

I had the same issue. Then I tried importing ReactQuill without lazy loading it worked for me. Instead of this const Quill = dynamic(import(react-quill), { ssr: false, loading: () => Loading ..., });

Try this import Quill from 'react-quill';

is it working in the app directory?

yakkhasuraj · 2023-06-06T03:29:48Z

I had the same issue. Then I tried importing ReactQuill without lazy loading it worked for me. Instead of this const Quill = dynamic(import(react-quill), { ssr: false, loading: () => Loading ..., });
Try this import Quill from 'react-quill';

is it working in the app directory?

Yes it's working in the app directory

quang13 · 2023-07-08T16:06:09Z

I have previously solved the following:
`
import dynamic from "next/dynamic"

const QuillNoSSRWrapper = dynamic(
async () => {
const { default: RQ } = await import("react-quill")
// eslint-disable-next-line react/display-name
return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />
},
{
ssr: false,
}
)

export const QuillToolbar = () => (

Arial {/* Comic Sans Courier New Georgia Helvetica Lucida */} Size 1 Size 2 Size 3 Size 4 Heading Subheading Normal {/* */} {/* */} {/* */} {/* */} ) export function QuillPage({ value, setValue }: { value: any, setValue: any }) { const dispatch = useDispatch() const dispatchFormData = (data: any) => dispatch(UploadActions.uploadMultiRequest(data)) const multiUploading = useSelector(UploadReducers.multiUploading) const multiUploadResponse = useSelector(UploadReducers.multiUploadResponse) const editorRef = useRef(null) const imageHandler = async () => { const input = document.createElement("input") input.setAttribute("type", "file") input.setAttribute("accept", "image/*") input.setAttribute("multiple", "multiple") input.click() input.onchange = async () => { if (input.files) { const listFile = input.files dispatchFormData(listFile) } } } const [isOpen, setIsOpen] = useState(false) useEffect(() => { if(!multiUploadResponse) return let quillObj = editorRef?.current?.getEditor(); const range = quillObj?.getSelection(); quillObj.editor.insertEmbed(range.index, 'image', multiUploadResponse?.links[0]); }, [multiUploadResponse]) const ImgHandle =() => { return ( pihgadgjgfjg,hdb,jfgjf ) } const modules = useMemo( () => ({ toolbar: { container: "#toolbar", handlers: { image: imageHandler, // video: handleUploadImagePost }, table: true, }, history: { delay: 500, maxStack: 100, userOnly: true, }, }), [] ) {isOpen===true && ()} const formats = [ "header", "font", "size", "bold", "italic", "underline", "align", "strike", "script", "blockquote", "background", "list", "bullet", "indent", "link", "video", "image", "color", "code-block", // "table" ] // useEffect(() => { // if(!multiUploadResponse) return // const quill = editorRef.current.getEditor() // let indexPosition = // }, [multiUploadResponse]) return ( <QuillNoSSRWrapper forwardedRef={editorRef} value={value} onChange={(value: any) => setValue(value)} placeholder={"Nội dung tối thiểu 100 kí tự"} modules={modules} formats={formats} /> ) } Add component into your functional: `

violetbee · 2023-07-17T13:48:33Z

Fixed my problem

// React Rich Text Editor (Quill)

import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';
import type ReactQuill from 'react-quill';
const QuillWrapper = dynamic(
  async () => {
    const { default: RQ } = await import('react-quill');
    // eslint-disable-next-line react/display-name
    return ({ ...props }) => <RQ {...props} />;
  },
  {
    ssr: false,
  }
) as typeof ReactQuill;

aldimenur · 2023-08-11T19:22:11Z

Thanks 👍

Naksik · 2023-08-17T09:16:25Z

This helped me with passing ref (TS, NextJS)
https://github.com/zenoamaro/react-quill#methods

import dynamic from 'next/dynamic'
import {useRef, LegacyRef} from 'react'
import type ReactQuill from 'react-quill'

interface IWrappedComponent extends React.ComponentProps<typeof ReactQuill> {
  forwardedRef: LegacyRef<ReactQuill>
}

const ReactQuillBase = dynamic(
  async () => {
    const {default: RQ} = await import('react-quill')

    function QuillJS({forwardedRef, ...props}: IWrappedComponent) {
      return <RQ ref={forwardedRef} {...props} />
    }

    return QuillJS
  },
  {
    ssr: false,
  },
)

export function Editor() {
  const quillRef = useRef<ReactQuill>(null)

  console.log(quillRef.current?.getEditor())

  return (
    <>
      <div>
        <ReactQuillBase forwardedRef={quillRef} />
      </div>
    </>
  )
}

anroopak · 2023-09-30T17:28:11Z

I had the same issue. Then I tried importing ReactQuill without lazy loading it worked for me. Instead of this const Quill = dynamic(import(react-quill), { ssr: false, loading: () => Loading ..., });

Try this import Quill from 'react-quill';

This worked perfectly fine for me. Thank you.

Wisesaturn · 2023-10-12T05:33:22Z

Fixed my problem

// React Rich Text Editor (Quill)

import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';
import type ReactQuill from 'react-quill';
const QuillWrapper = dynamic(
  async () => {
    const { default: RQ } = await import('react-quill');
    // eslint-disable-next-line react/display-name
    return ({ ...props }) => <RQ {...props} />;
  },
  {
    ssr: false,
  }
) as typeof ReactQuill;

Thanks me a lot :)

v-kryvenda · 2023-11-06T13:18:00Z

is not woking
Cannot read properties of undefined (reading 'prototype')
next 13.4

n8finch · 2023-11-08T21:28:43Z

is not woking Cannot read properties of undefined (reading 'prototype') next 13.4

Same

v-kryvenda · 2023-11-09T06:45:54Z

is not woking Cannot read properties of undefined (reading 'prototype') next 13.4

Same

Check lib version in packege.json and try to reinstall it.

wolfcreative · 2023-11-09T16:05:55Z

Check out my comment with a native solution for next.js

sam-lukaa · 2023-12-08T20:40:24Z

I have previously solved the following: ` import dynamic from "next/dynamic"

const QuillNoSSRWrapper = dynamic( async () => { const { default: RQ } = await import("react-quill") // eslint-disable-next-line react/display-name return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} /> }, { ssr: false, } )

export const QuillToolbar = () => (

Arial {/* Comic Sans Courier New Georgia Helvetica Lucida /} Size 1 Size 2 Size 3 Size 4 Heading Subheading Normal {/ /} {/ /} {/ /} {/ /} ) export function QuillPage({ value, setValue }: { value: any, setValue: any }) { const dispatch = useDispatch() const dispatchFormData = (data: any) => dispatch(UploadActions.uploadMultiRequest(data)) const multiUploading = useSelector(UploadReducers.multiUploading) const multiUploadResponse = useSelector(UploadReducers.multiUploadResponse) const editorRef = useRef(null) const imageHandler = async () => { const input = document.createElement("input") input.setAttribute("type", "file") input.setAttribute("accept", "image/") input.setAttribute("multiple", "multiple") input.click() input.onchange = async () => { if (input.files) { const listFile = input.files dispatchFormData(listFile) } } } const [isOpen, setIsOpen] = useState(false) useEffect(() => { if(!multiUploadResponse) return let quillObj = editorRef?.current?.getEditor(); const range = quillObj?.getSelection(); quillObj.editor.insertEmbed(range.index, 'image', multiUploadResponse?.links[0]); }, [multiUploadResponse]) const ImgHandle =() => { return ( pihgadgjgfjg,hdb,jfgjf ) } const modules = useMemo( () => ({ toolbar: { container: "#toolbar", handlers: { image: imageHandler, // video: handleUploadImagePost }, table: true, }, history: { delay: 500, maxStack: 100, userOnly: true, }, }), [] ) {isOpen===true && ()} const formats = [ "header", "font", "size", "bold", "italic", "underline", "align", "strike", "script", "blockquote", "background", "list", "bullet", "indent", "link", "video", "image", "color", "code-block", // "table" ] // useEffect(() => { // if(!multiUploadResponse) return // const quill = editorRef.current.getEditor() // let indexPosition = // }, [multiUploadResponse]) return ( <QuillNoSSRWrapper forwardedRef={editorRef} value={value} onChange={(value: any) => setValue(value)} placeholder={"Nội dung tối thiểu 100 kí tự"} modules={modules} formats={formats} /> ) } Add component into your functional: `

const QuillNoSSRWrapper = dynamic( async () => { const { default: RQ } = await import('react-quill'); // eslint-disable-next-line react/display-name return ({ ...props }) => <RQ {...props} />; }, { ssr: false } );

export const MainEditor = ({ content, setContent }: any) => { return ( <> <QuillNoSSRWrapper // @ts-ignore theme="snow" value={content} modules={modules} formats={formats} onChange={setContent} placeholder="compose here" /> </> ); };

rakibulinux · 2023-12-28T05:41:50Z

I'm not getting default value. How can I fix it? I'm using 14.0.1

jamilakterup · 2024-02-25T06:59:27Z

I can't build reactQuill, It's ok in the dev server but when I try to build it with "yarn build" "it gives an error.
Export encountered errors on following paths:
/dashboard/settings/page: /dashboard/settings
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const Settings = () => {
const [value, setValue] = useState('');

return (

)
}

trinhminhhieu · 2024-09-11T09:14:00Z

Try here

solution1:

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

solution2:

import dynamic from 'next/dynamic'

const ReactQuill = dynamic(
  async () => {
    const { default: RQ } = await import('react-quill')

    return ({ ...props }) => <RQ {...props} />
  },
  {
    ssr: false,
  }
)

faker007 · 2024-10-23T06:32:26Z

This helped me with passing ref (TS, NextJS) https://github.com/zenoamaro/react-quill#methods

import dynamic from 'next/dynamic'
import {useRef, LegacyRef} from 'react'
import type ReactQuill from 'react-quill'

interface IWrappedComponent extends React.ComponentProps<typeof ReactQuill> {
  forwardedRef: LegacyRef<ReactQuill>
}

const ReactQuillBase = dynamic(
  async () => {
    const {default: RQ} = await import('react-quill')

    function QuillJS({forwardedRef, ...props}: IWrappedComponent) {
      return <RQ ref={forwardedRef} {...props} />
    }

    return QuillJS
  },
  {
    ssr: false,
  },
)

export function Editor() {
  const quillRef = useRef<ReactQuill>(null)

  console.log(quillRef.current?.getEditor())

  return (
    <>
      <div>
        <ReactQuillBase forwardedRef={quillRef} />
      </div>
    </>
  )
}

It works like charm! on Next.js 14 + App router

Thanks a lot! you saved me a week!!!

OmBharti999 · 2025-01-12T18:05:20Z

Hello,

SOLUTION

for those who tried hard and still not able to run the react-quill you can use react-quill-new.

Your Welcome!!!

alexkrolick mentioned this issue Sep 15, 2023

Server-Side Rendering (SSR), NextJS, etc. #919

Open

55555-Jyeon mentioned this issue Jun 6, 2024

YG-39 [feat]: editor mobi-projects/yeogi-client#27

Merged

6 tasks

h-yabi2 mentioned this issue Jul 19, 2024

Next.js の app router だとビルド時にエラーが出る（ReferenceError: document is not defined） h-yabi2/react-quill#3

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ReactQuill component not appearing in NextJS 13.4.2 #897

ReactQuill component not appearing in NextJS 13.4.2 #897

gurbaaz27 commented May 26, 2023

sohaibMan commented May 29, 2023

gurbaaz27 commented May 29, 2023

moussaab-moulim commented Jun 1, 2023

sohaibMan commented Jun 2, 2023 •

edited

Loading

yakkhasuraj commented Jun 5, 2023

sohaibMan commented Jun 5, 2023

yakkhasuraj commented Jun 6, 2023

quang13 commented Jul 8, 2023

violetbee commented Jul 17, 2023 •

edited

Loading

aldimenur commented Aug 11, 2023

Naksik commented Aug 17, 2023 •

edited

Loading

anroopak commented Sep 30, 2023

Wisesaturn commented Oct 12, 2023

v-kryvenda commented Nov 6, 2023

n8finch commented Nov 8, 2023

v-kryvenda commented Nov 9, 2023

wolfcreative commented Nov 9, 2023

sam-lukaa commented Dec 8, 2023 •

edited

Loading

rakibulinux commented Dec 28, 2023

jamilakterup commented Feb 25, 2024

trinhminhhieu commented Sep 11, 2024

faker007 commented Oct 23, 2024

OmBharti999 commented Jan 12, 2025 •

edited

Loading

ReactQuill component not appearing in NextJS 13.4.2 #897

ReactQuill component not appearing in NextJS 13.4.2 #897

Comments

gurbaaz27 commented May 26, 2023

sohaibMan commented May 29, 2023

gurbaaz27 commented May 29, 2023

moussaab-moulim commented Jun 1, 2023

sohaibMan commented Jun 2, 2023 • edited Loading

yakkhasuraj commented Jun 5, 2023

sohaibMan commented Jun 5, 2023

yakkhasuraj commented Jun 6, 2023

quang13 commented Jul 8, 2023

violetbee commented Jul 17, 2023 • edited Loading

aldimenur commented Aug 11, 2023

Naksik commented Aug 17, 2023 • edited Loading

anroopak commented Sep 30, 2023

Wisesaturn commented Oct 12, 2023

v-kryvenda commented Nov 6, 2023

n8finch commented Nov 8, 2023

v-kryvenda commented Nov 9, 2023

wolfcreative commented Nov 9, 2023

sam-lukaa commented Dec 8, 2023 • edited Loading

rakibulinux commented Dec 28, 2023

jamilakterup commented Feb 25, 2024

trinhminhhieu commented Sep 11, 2024

faker007 commented Oct 23, 2024

OmBharti999 commented Jan 12, 2025 • edited Loading

sohaibMan commented Jun 2, 2023 •

edited

Loading

violetbee commented Jul 17, 2023 •

edited

Loading

Naksik commented Aug 17, 2023 •

edited

Loading

sam-lukaa commented Dec 8, 2023 •

edited

Loading

OmBharti999 commented Jan 12, 2025 •

edited

Loading