Import Error in React(Typescript)

[korayaggul]

application not working during package implemention just have white screen in react app

when it import it doesn't work

Code;

import React, { useEffect, useState, useRef, useCallback } from "react";
import Quill from "quill";
import "quill/dist/quill.bubble.css";
import "quill/dist/quill.snow.css";
import Sharedb from "sharedb/lib/client";
import richText from "rich-text";
var Connection = require("sharedb/lib/client").Connection;

Sharedb?.types?.register(richText.type);

const RichTextarea = ({ id, collection, autoScroll }: any) => {
const [socket, setSocket]: any = useState(null);
const [connection, setConnection]: any = useState(null);
const [quillObj, setQuillObj]: any = useState(null);

useEffect(() => {
const _socket = new WebSocket("ws://wwww.localhost:3001");
const _connection = new Connection(_socket);
setSocket(_socket);
setConnection(_connection);
}, []);

Package.json;

"dependencies": {
"@apollo/client": "^3.5.10",
"@chatscope/chat-ui-kit-react": "^1.9.7",
"@chatscope/chat-ui-kit-styles": "^1.2.5",
"@mantine/core": "^4.2.4",
"@mantine/dates": "^4.2.4",
"@mantine/form": "^4.2.8",
"@mantine/hooks": "^4.2.4",
"@mantine/notifications": "^4.2.4",
"@mantine/rte": "^4.2.4",
"@reduxjs/toolkit": "^1.8.1",
"@stripe/react-stripe-js": "^1.10.0",
"@stripe/stripe-js": "^1.35.0",
"@types/react-credit-cards": "^0.8.1",
"@types/react-helmet": "^6.1.5",
"@types/sharedb": "^3.0.0",
"@types/socket.io-client": "^3.0.0",
"@types/stripe-v3": "^3.1.27",
"@vime/core": "^5.3.1",
"@vime/react": "^5.3.1",
"axios": "^0.26.1",
"browser-image-compression": "^2.0.0",
"buffer": "^6.0.3",
"dayjs": "^1.11.3",
"firebase": "^9.6.11",
"get-orientation": "^1.1.2",
"graphql": "^16.3.0",
"html-react-parser": "^1.4.10",
"i18next": "^21.8.14",
"i18next-browser-languagedetector": "^6.1.4",
"i18next-http-backend": "^1.4.1",
"moment-timezone": "^0.5.34",
"quill": "^1.3.7",
"react": "^17.0.0",
"react-avatar-edit": "^1.2.0",
"react-awesome-reveal": "^3.8.1",
"react-credit-cards": "^0.8.3",
"react-dom": "^17.0.0",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.29.0",
"react-i18next": "^11.18.1",
"react-icons": "^4.3.1",
"react-infinite-scroll-hook": "^4.0.3",
"react-intersection-observer": "^8.34.0",
"react-lottie-player": "^1.4.1",
"react-markdown": "^8.0.3",
"react-player": "^2.10.1",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.2",
"react-video-play": "^2.0.3",
"react-web-share": "^1.1.6",
"rich-text": "^4.1.0",
"sharedb": "^3.1.0",
"sharedb-string-binding": "^1.0.0",
"socket.io-client": "^2.3.1",
"tabler-icons-react": "^1.53.0",
"use-dynamic-refs": "^1.0.0",
"web-vitals": "^2.1.0",
"workbox-background-sync": "^6.5.3",
"workbox-broadcast-update": "^6.5.3",
"workbox-cacheable-response": "^6.5.3",
"workbox-core": "^6.5.3",
"workbox-expiration": "^6.5.3",
"workbox-google-analytics": "^6.5.3",
"workbox-navigation-preload": "^6.5.3",
"workbox-precaching": "^6.5.3",
"workbox-range-requests": "^6.5.3",
"workbox-routing": "^6.5.3",
"workbox-strategies": "^6.5.3",
"workbox-streams": "^6.5.3"
},
"devDependencies": {
"@originjs/vite-plugin-commonjs": "^1.0.3",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-lottie": "^1.2.6",
"@types/react-redux": "^7.1.23",
"@vitejs/plugin-react": "^1.0.0",
"autoprefixer": "^10.4.0",
"postcss": "^8.4.4",
"sass": "^1.49.9",
"typescript": "^4.3.2",
"vite": "^2.6.4",
"vite-plugin-pwa": "^0.12.0"
}

[alecgibson]

You've not actually instantiated Quill anywhere (new Quill('...'))? I'd start by reading the Quill documentation or following one of our examples.

[korayaggul]

Quill'i herhangi bir yerde somutlaştırmadınız mı ( new Quill('...'))? Quill belgelerini okuyarak veya örneklerimizden birini izleyerek başlardım .

yes, I solved the require problem, 1-2 days later, it caused a problem again, just a white screen.

useEffect(() => {
if (!doc) {
return;
}
doc.subscribe((err: any) => {
if (err) throw err;

  const toolbarOptions = [
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    ["bold", "italic", "underline"],
    [{ color: [] }, { background: [] }],
    [{ align: [] }],
    ["clean"],
  ];
  const options = {
    theme: "snow",
    scrollingContainer: "scrolling-container",
    modules: {
      toolbar: toolbarOptions,
    },
  };
  const quill = new Quill("#editor", options);
  /**
   * On Initialising if data is present in servers
   * Updaing its content to editor
   */
  quill.setContents(doc.data);

  /**
   * On Text change publishing to our server
   * so that it can be broadcasted to all other clients
   */
  quill.on("text-change", (delta: any, _oldDelta: any, source: any) => {
    if (source !== "user") return;
    doc.submitOp(delta, { source: quill });
  });

  setQuillObj(quill);

  console.log("yo");
});

}, [doc]);