React Quill window 未定义

Question

I added React Quill to Next.js project and it works fine. But the problem begins when I try to add ImageResize to editor.

When I add line

Quill.register('modules/imageResize', ImageResize)

I get an error

ReferenceError: window is not defined

I think the problem is with Quill import, but can't find any working solution.

TesxtEditor.tsx

import { useState, useEffect } from 'react'
import dynamic from 'next/dynamic'
import 'react-quill/dist/quill.snow.css'
import styles from '../styles/Components/TextEditor.module.scss'
import ImageResize from 'quill-image-resize-module-react'
import { Quill } from 'react-quill'
const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })

Quill.register('modules/imageResize', ImageResize)

interface TextEditorParams {
  onChange: (value: string) => string | void
  placeholder?: string
  error?: boolean
  defaultValue?: string | undefined
  required?: boolean
}

const TextEditor = ({
  onChange,
  placeholder,
  error,
  defaultValue,
  required
}: TextEditorParams) => {
  const [errorState, setErrorState] = useState<boolean | undefined>(false)

  useEffect(() => {
    let shouldUpdate = true
    if (shouldUpdate) {
      setErrorState(error)
    }

    return () => {
      shouldUpdate = false
    }
  }, [error])

  const modules = {
    toolbar: {
      container: [
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ align: [] }],
        ['link', 'image'],
        ['clean']
      ]
    },
    imageResize: {
      parchment: Quill.import('parchment'),
      modules: ['Resize', 'DisplaySize', 'Toolbar']
    }
  }

  const changeValue = (value: string) => {
    onChange(value)
  }

  return (
    <div className={styles.editor}>
      <ReactQuill
        modules={modules}
        defaultValue={defaultValue}
        onChange={(value) => changeValue(value)}
        placeholder={`${placeholder} ${required ? '*' : ''}`}
        className={errorState ? 'textEditor__error' : 'textEditor'}
      />
    </div>
  )
}

export default TextEditor

Answer 1

Wrap your component in this hellper component.

To dynamically load a component on the client side, you can use the ssr option to disable server-rendering. This is useful if an external dependency or component relies on browser APIs like window.

docs no ssr import

 import React from 'react'; import dynamic from 'next/dynamic'; const NoSSR = ({ children }) => ( <>{children}</> ); export default dynamic(() => Promise.resolve(NoSSR), { ssr: false, });

Just like that:

 import NoSSR from "NoSSR" import {TextEdior as TextEditortQuill} from "./TextEditor" const TextEditor = ({...props}) => { return ( <NoSSR> <TextEditortQuill {...props}> </NoSSR> ) } export default TextEditor;

Answer 2

I am using react-quill (v2.0.0) with quill-image-resize-module-react (v3.0.0) on nextjs & I faced the same problem....

1. First I found out that I need to dynamic import React-Quill or its parent component because this package depends on client side object like window. So here's what I did to import my Editor component which includes react-quill -

import dynamic from 'next/dynamic'
const Editor = dynamic(import('components/Editor'), { ssr: false })

2. The image resizing worked well until I clicked on any image & pressed DEL or BACKSPACE , at which point I found this window.Quill is undefined error. All I did was add window.Quill = Quill to my code & it was good to go again.

import ImageResize from 'quill-image-resize-module-react'
import ReactQuill, { Quill } from 'react-quill'
import 'react-quill/dist/quill.snow.css'

window.Quill = Quill
Quill.register('modules/imageResize', ImageResize)

Hope this helps someone save some time debugging