javascript - React Script Error "http:localhost:3000staticjsbundle.js"

I am new to React and still on the learning path, so I was implementing React Router after implementing it, the website is not running anymore, I don't know what went wrong so please help me here.

App.js

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

import logo from "./logo.svg";

import "./App.css";
import "./nav.css";
import Keasy_warner from "./ponents/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
      }
    }


   
  });

Index.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="/[email protected]/dist/css/uikit.min.css" />

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

    <link href='/[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="/[email protected]/dist/js/uikit-icons.min.js"></script>

    <script src="/[email protected]/dist/js/uikit.min.js"></script>

  </body>
</html>

This is the error which i am getting and due to this error the page is not rendering.

Error

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

Console Error

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

Here is the image of the error

I am new to React and still on the learning path, so I was implementing React Router after implementing it, the website is not running anymore, I don't know what went wrong so please help me here.

App.js

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

import logo from "./logo.svg";

import "./App.css";
import "./nav.css";
import Keasy_warner from "./ponents/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
      }
    }


   
  });

Index.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/npm/[email protected]/dist/css/uikit.min.css" />

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

    <link href='https://unpkg./[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/npm/[email protected]/dist/js/uikit-icons.min.js"></script>

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

  </body>
</html>

This is the error which i am getting and due to this error the page is not rendering.

Error

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

Console Error

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

Here is the image of the error

Share Improve this question asked Apr 11, 2023 at 10:17 Akki Jangir 1911 gold badge3 silver badges13 bronze badges

Depending on the way you initialized your project, you may have a main.jsx (when using create-vite) or index.js (when using create-react-app). If it's not there already, you should move your ReactDOM.createRoot(...) call to one of these files, to avoid calling it multiple times (and fix your error). – Szigeti Péter Commented Apr 11, 2023 at 11:09
sorry bro i didn't understand also there is not a single file in project with extension jsx and also there is no main.jsx, So i don't know where i should move this function, please be more simpler – Akki Jangir Commented Apr 11, 2023 at 11:21
Sure, I'll try. How did you begin the project? Did you use create-react-app? – Szigeti Péter Commented Apr 11, 2023 at 12:55
yes i use create-react-app – Akki Jangir Commented Apr 12, 2023 at 5:04

Add a ment |

2 Answers 2

Sorted by: Reset to default 0 I think you misunderstood the way that reacts works.
your app ponent is called by the main or index ponent that has the render function in it.
I think you should move the router ponent in the app function and let the main.js file render
by the way, I don't know if this syntax for the router is correct or not and another tip:
Don't Use create-react-app. It's dead! you can see docs in react.dev

if still not resolved try

import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

and add

<PayPalScriptProvider>
   <PayPalButtons {...Your code here}/>
</PayPalScriptProvider>

when using React JS

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - React Script Error "http:localhost:3000staticjsbundle.js" - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)