Reference Error: Require not defined. Does React-quilljs work with vite?

Question

The site runs but on the opening of two modals it throws the reference error and the page goes blank.

I am using react-quill for a text editor which is the cause of the problem. All of it works locally!! Just in the build it fails. and throws a Require not defined reference Error.

The React Quill File:

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>
  )
}

I tried adding 'react-quilljs' to the defineConfig: optimizeDeps but its not helping.

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"
  }
}