Import Error in React(Typescript)

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

Start with the import block in the issue and the listed package.json dependencies, then reproduce the white screen in the React/TypeScript app while capturing the build or browser error. No repository file or test is named, so first identify which import fails and where the failure is reported. Done means the import problem is reproducible, its cause is established, and the app renders successfully.