ReferenceError: require is not defined after deploying

[HakobHakob]

Hi everyone. I have problem with quill.
I have a "blog-app" project, where I use "quill" (^2.0.2) and "react-quilljs" (^2.0.4) for creating or updating posts. Project with vite.
On localhost, it works fine, but after deploying it on the "Render" platform, I get an error in the console with the following messages:
.
In the DevTools Sources tab, I can see where the error occurs:

Here is my component logic:

import { useQuill } from "react-quilljs"
import Quill from "quill"
import "quill/dist/quill.snow.css"
import PropTypes from "prop-types"
import { memo, useEffect } from "react"

const PostContent = ({ changePostContent, content }) => {
const { quill, quillRef } = useQuill({
modules: {
toolbar: [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
["bold", "italic", "underline", "strike"],
[{ list: "ordered" }, { list: "bullet" }],
["link"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
["pre"],
],
},
formats: [
"header",
"bold",
"italic",
"underline",
"strike",
"list",
"link",
"color",
"background",
"align",
"pre",
],
})

useEffect(() => {
// Define and register the custom pre format
const Block = Quill.import("blots/block")
class PreBlot extends Block {}
PreBlot.blotName = "pre"
PreBlot.tagName = "pre"
Quill.register({ "formats/pre": PreBlot }, true)

if (quill) {
  if (content && quill.root.innerHTML !== content) {
    const currentSelection = quill.getSelection()
    quill.root.innerHTML = content || ""
    if (currentSelection) {
      quill.setSelection(currentSelection)
    }
  }
  quill.on("text-change", () => {
    const updatedContent = quill.root.innerHTML
    changePostContent(updatedContent)
  })
}

}, [quill, content, changePostContent])

return (

)
}

PostContent.propTypes = {
changePostContent: PropTypes.func.isRequired,
content: PropTypes.string,
}

// Adding display name to the memoized component
const CreatePostContent = memo(PostContent)
CreatePostContent.displayName = "PostContent"

export default CreatePostContent

And here are my Vite config settings:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
import { fileURLToPath } from "url";
import path from "path";

// Setting up a replacement for __dirname
const __dirname = path.dirname(fileURLToPath(import.meta.url));

// Vite configuration
export default defineConfig({
server: {
proxy: {
"/api_v1": {
target: "http://localhost:3000",
secure: false,
},
},
},
plugins: [react(), viteCommonjs()],
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
},
},
optimizeDeps: {
include: ["quill"],
},
ssr: {
noExternal: ["quill"],
},
});

How solve this issue?