React-quilljs在Vite构建环境中出现Require未定义错误求助

问题现象 #

• 网站正常运行，但打开两个包含react-quill编辑器的模态框时，页面抛出ReferenceError: Require not defined错误并变为空白
• 本地开发环境无异常，仅生产构建后出现该问题
• 已尝试在Vite的defineConfig中把react-quilljs加入optimizeDeps，未解决问题

相关代码 #

RichTextEditor组件代码 #

import React, { useState, useEffect } from 'react'
import 'react-quill/dist/quill.snow.css'
import { useQuill } from 'react-quilljs'

export default function RichTextEditor({
  getHtml,
  placeholder,
  styles,
}: {
  getHtml: (value: string) => void
  placeholder: string
  styles: React.CSSProperties
}) {
  const modules = {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ color: [] }, { background: [] }],
      ['clean'],
    ],
  }
  const { quill, quillRef } = useQuill({ modules })
  const [value, setValue] = useState<string>(placeholder)
  const [focused, setFocused] = useState<boolean>(false)

  useEffect(() => {
    if (quill) {
      quill.clipboard.dangerouslyPasteHTML(placeholder)
      quill.on('text-change', () => {
        setValue(quillRef.current.firstChild.innerHTML) // Get innerHTML using quillRef
      })
    }
  }, [quill])
  getHtml(value)

  return (
    <div style={styles}>
      <div ref={quillRef} />
    </div>
  )
}

package.json配置 #

{  
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  "scripts": {
    "dev": "VITE_APP_ENV=\"beta\" vite",
    "build": "VITE_APP_ENV=\"beta\" vite build",
    "build:beta": "VITE_APP_ENV=\"beta\" vite build",
    "build:prod": "REACT_APP_ENV=\"prod\" vite build",
    "lint": "eslint",
    "preview": "vite preview",
    "test": "echo \"All tests passed\""
  },
  "dependencies": {
    "@content-api": "*",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-circular-progressbar": "^1.1.0",
    "@types/react-dropzone": "^5.1.0",
    "@types/react-gtm-module": "^2.0.1",
    "@types/react-html-parser": "^2.0.2",
    "@types/react-time-picker": "^4.0.2",
    "@types/uuid": "^8.3.1",
    "buffer": "^6.0.3",
    "immer": "^9.0.6",
    "react": "18.1.0",
    "react-beautiful-dnd": "^13.1.0",
    "react-circular-progressbar": "^2.0.4",
    "react-date-picker": "^8.4.0",
    "react-dom": "18.1.0",
    "react-dropzone": "^11.4.2",
    "react-gtm-module": "^2.0.11",
    "react-hot-toast": "^2.2.0",
    "react-html-parser": "^2.0.2",
    "react-query": "^3.34.15",
    "react-quill": "^2.0.0",
    "react-quilljs": "^1.3.3",
    "react-responsive": "^9.0.0-beta.4",
    "react-router-dom": "^6.2.1",
    "react-scripts": "4.0.3",
    "react-spinners": "^0.11.0",
    "react-time-picker": "^4.4.3",
    "source-map-explorer": "^2.5.2",
    "styled-components": "^5.3.3",
    "typescript": "^4.9.4",
    "uuid": "^8.3.2",
    "vite-plugin-svgr": "^2.2.2",
    "web-vitals": "^1.0.1",
    "zustand": "^3.5.13"
  },
  "devDependencies": {
    "@rollup/plugin-babel": "^6.0.3",
    "@rollup/plugin-commonjs": "^24.0.0",
    "@types/quill": "^2.0.9",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.8",
    "@types/styled-components": "^5.1.15",
    "@vitejs/plugin-react": "^2.2.0",
    "vite": "^3.2.3"
  }
}

解决方案 #

1. 移除冗余依赖，统一使用官方react-quill #

你的package.json同时安装了react-quill和react-quilljs，两者功能重叠，且react-quilljs的底层Quill版本与Vite生产构建存在兼容性问题。直接移除react-quilljs，改用官方维护的react-quill组件：

修改后的RichTextEditor组件：

import React, { useState, useEffect } from 'react'
import 'react-quill/dist/quill.snow.css'
import ReactQuill from 'react-quill'

export default function RichTextEditor({
  getHtml,
  placeholder,
  styles,
}: {
  getHtml: (value: string) => void
  placeholder: string
  styles: React.CSSProperties
}) {
  const modules = {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ color: [] }, { background: [] }],
      ['clean'],
    ],
  }
  const [value, setValue] = useState<string>(placeholder)

  useEffect(() => {
    getHtml(value)
  }, [value, getHtml])

  return (
    <div style={styles}>
      <ReactQuill
        theme="snow"
        value={value}
        onChange={setValue}
        placeholder={placeholder}
        modules={modules}
      />
    </div>
  )
}

2. 配置Vite正确处理Quill的CommonJS模块 #

在vite.config.ts中添加如下配置，确保Quill及其依赖被正确转换：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['quill', 'react-quill'],
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
  resolve: {
    alias: {
      quill: 'quill/dist/quill.js',
    },
  },
})

3. 清理缓存后重新构建 #

执行命令清理构建缓存，避免残留旧文件影响：

rm -rf node_modules/.cache
npm run build:prod

4. 优化模态框渲染逻辑 #

确保两个模态框中的编辑器组件不会重复初始化Quill实例：

• 使用React.memo包装RichTextEditor组件，避免不必要的重渲染
• 在模态框关闭时，确保组件被正确卸载，或者手动移除Quill的事件监听

内容的提问来源于stack exchange，提问作者ryannnnnn