React Quill 窗口未定义答案

【问题标题】：React Quill window is not definedReact Quill 窗口未定义
【发布时间】：2023-02-04 04:00:38
【问题描述】：

我将 React Quill 添加到 Next.js 项目并且它工作正常。但是当我尝试将 ImageResize 添加到编辑器时，问题就开始了。

当我添加行

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

我得到一个错误

ReferenceError: 窗口未定义

我认为问题出在Quill import，但找不到任何有效的解决方案。

文本编辑器.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

【问题讨论】：

您必须保护此导入不在服务器上运行。（它在 nextjs ssr 部分上运行）。您可以使用动态导入或仅在 clinet 上的组件渲染器中渲染此组件（文本编辑器）。 nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
我没有考虑使用动态导入我的TextEditor组件。这解决了我的问题。但我不喜欢每次我想使用这个组件时都必须使用动态导入，也许在组件内部有更微妙的解决方案？

标签： reactjs typescript next.js react-quill

【解决方案1】：

将您的组件包装在这个 hellper 组件中。

要在客户端动态加载组件，可以使用 ssr 选项禁用服务器渲染。如果外部依赖项或组件依赖于浏览器 API，这将很有用像窗户。

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,
});
就像那样：
import NoSSR from "NoSSR"
import {TextEdior as TextEditortQuill} from "./TextEditor"


const TextEditor = ({...props}) => {

   return (
     <NoSSR>
       <TextEditortQuill {...props}>
     </NoSSR>
   )
}

export default TextEditor;

【讨论】：

【解决方案2】：

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

首先我发现我需要 dynamic importReact-Quill 或其父组件，因为这个包依赖于客户端对象，如窗口。所以这就是我导入包含 react-quill 的编辑器组件的操作 -
```
import dynamic from 'next/dynamic'
const Editor = dynamic(import('components/Editor'), { ssr: false })
```
1. 图像大小调整效果很好，直到我单击任何图像并按DEL或BACKSPACE，此时我发现了这个window.Quill is undefined错误。我所做的只是将 window.Quill = Quill 添加到我的代码中，很高兴再次开始。
```
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)
```
希望这可以帮助某人节省一些调试时间?

【讨论】：