React Quill window 未定義

Question

我將React Quill添加到Next.js項目，它工作正常。 但是當我嘗試將ImageResize添加到編輯器時，問題就開始了。

當我添加行

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

我得到一個錯誤

ReferenceError: window 未定義

我認為問題出在Quill導入上，但找不到任何可行的解決方案。

文本編輯器.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

將您的組件包裝在這個 hellper 組件中。

要在客戶端動態加載組件，可以使用 ssr 選項禁用服務器渲染。 如果外部依賴項或組件依賴瀏覽器 API （如 window），這將很有用。

文檔沒有 ssr 導入

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

就像那樣：

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

Answer 2

我在 nextjs 上使用react-quill quill (v2.0.0) 和 quill quill-image-resize-module-react (v3.0.0) & 我遇到了同樣的問題....

1. 首先，我發現我需要dynamic import React-Quill 或其父組件，因為這個 package 依賴於客戶端 object，例如 window。所以這是我導入包含 react-quill 的編輯器組件的操作 -

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

2. 圖像大小調整效果很好，直到我點擊任何圖像並按下DEL或BACKSPACE ，此時我發現這個window.Quill is undefined錯誤。 我所做的只是將window.Quill = Quill添加到我的代碼中，再次添加到 go 很好。

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)

希望這可以幫助某人節省一些調試時間