Ошибка сценария реакции «http://localhost:3000/static/js/bundle.js»

Я новичок в React и все еще на пути обучения, поэтому я внедрял React Router после его внедрения, веб-сайт больше не работает, я не знаю, что пошло не так, поэтому, пожалуйста, помогите мне здесь.

App.js

import React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";

import logo from "./logo.svg";

import "./App.css";
import "./nav.css";
import Keasy_warner from "./components/Keasy_warner";

let Menu_Icon = "./icons/menu.svg";


const router = createBrowserRouter([
    {
      path: "/",
      element: <Navbar/>,
    },
    {
        path: './Home',
        element: <Home pageName='THis is Home Page'/>
    },
  ]);
  
  ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
      <RouterProvider router = {router}/>
    </React.StrictMode>
  );

function App() {
  return (
    <>
    </>
  );
}

export default App;

Navbar.js

import React from 'react';
import $ from "jquery";

export default function Navbar() {
  return (
    <div uk-sticky = "sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">



<div className = "sidebar open">
    <div className = "logo-details">
        <i className='icon'><img className = "pp_logo" src = "./PP_LOGO.svg" alt = ""/></i>

        <div className = "logo_name">PP_BMK</div>
        <i className='bx bx-menu' id = "btn"></i>
    </div>
    <ul className = "nav-list">
        
        <li>
            <a href = "/">
            <i className='bx bxs-dashboard className'></i>
                <span className = "links_name">Dashboard</span>
            </a>
            <span className = "tooltip">Dashboard</span>
        </li>
        <li className = "lwm">
            <div className = "iocn-link">
                <a href = "#">
                <i className='bx bxs-folder icon'></i>
                    <span className = "links_name">Keasy Warner</span>
                </a>
                <span className = "tooltip">Keasy Warner</span>

            </div>
            
        </li>

        {/* <li className = "lwm">
            <div className = "iocn-link">
                <a href = "#">
                    <i className='bx bx-book'></i>
                    <span className = "links_name">Exams</span>
                </a>
                <span className = "tooltip">Exam</span>

            </div>
            <ul className = "sub-menu">
                <li><a href = "./pages/exam_attendance_sheet.html">Exam Attendance Sheet</a></li>
                <li><a href = "#">Result Declration</a></li>
                <li><a href = "#">Paper Print</a></li>
                <li><a href = "#">Paper Edit</a></li>
            </ul>
        </li> */}


                    <li className = "profile">
                        <div className = "profile-details">
                            <img src = "./images/jjtu_logo_200x200.png" alt = "profileImg"/>
                            <div className = "name_job">
                                <div className = "name">Exam Cell</div>
                                <div className = "job">Manged By Vinnet Sir</div>
                            </div>
                        </div>
                        <i className='bx bx-log-out' id = "log_out"></i>
                    </li>


    </ul>
</div>




</div>
  )
}

 $(function() {

    let sidebar = document.querySelector(".sidebar");
    let closeBtn = document.querySelector("#btn");
   
  
    // let arrow = document.querySelectorAll(".lwm");
  
    // for (var i = 0; i < arrow.length; i++) {
    //   arrow[i].addEventListener("click", (e) => {
    //     let arrowParent = e.target.parentElement.parentElement.parentElement; //selecting main parent of arrow
  
    //     arrowParent.classList.toggle("showMenu");
    //   });
    // }
  
    closeBtn.addEventListener("click", () => {
        debugger;
      sidebar.classList.toggle("open");
      
  
    //   if (options_menus.classList.contains("showMenu")) {
        
    //     $(".nav-list").find("li").removeClass("showMenu");
    //   }
      menuBtnChange(); //calling the function(optional)
    });
  
  
  
    // following are the code to change sidebar button(optional)
    function menuBtnChange() {
      if (sidebar.classList.contains("open")) {
        closeBtn.classList.replace("bx-menu", "bx-menu-alt-right"); //replacing the iocns class
      } else {
        closeBtn.classList.replace("bx-menu-alt-right", "bx-menu"); //replacing the iocns class
      }
    }


   
  });

Индекс.html

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8" />
    <link rel = "icon" href = "%PUBLIC_URL%/favicon.ico" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1" />
    <meta name = "theme-color" content = "#000000" />
    <meta
      name = "description"
      content = "Web site created using create-react-app"
    />

    <link rel = "manifest" href = "%PUBLIC_URL%/manifest.json" />

    <!-- UIkit CSS -->
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />

    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
 
    

    

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id = "root"></div>

  


    


    
    

    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>

    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>

  </body>
</html>

Это ошибка, которую я получаю, и из-за этой ошибки страница не отображается.

Ошибка

Compiled with problems:
×
ERROR
Script error.
    at http://localhost:3000/static/js/bundle.js:55045:58

Ошибка консоли

react-dom.development.js:86 Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
printWarning @ react-dom.development.js:86
uikit.min.js:1 Uncaught TypeError: Cannot destructure property 'offset' of 'this._data' as it is undefined.
    at n.hide (uikit.min.js:1:84516)
    at n.disconnected (uikit.min.js:1:81251)
    at uikit.min.js:1:28564
    at Array.forEach (<anonymous>)
    at fe (uikit.min.js:1:28551)
    at us (uikit.min.js:1:28787)
    at ia (uikit.min.js:1:32492)
    at Tt (uikit.min.js:1:11523)
    at ta (uikit.min.js:1:32184)
    at Array.forEach (<anonymous>)
uikit.min.js:1 TypeError: Cannot destructure property 'height' of 'undefined' as it is undefined.
    at n.read (uikit.min.js:1:81968)
    at Pr (uikit.min.js:1:24252)
    at uikit.min.js:1:24056
    at Ws (uikit.min.js:1:14745)
    at Zi (uikit.min.js:1:14478)
    at uikit.min.js:1:14694
Ws @ uikit.min.js:1
localhost/:1 Error while trying to use the following icon from the Manifest: http://localhost:3000/logo192.png (Download error or resource isn't a valid image)
localhost/:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

Вот изображение ошибки