React app start error due to react refresh - node.js

Question

So I am trying run a react app locally that was originally developed on windows, on my system which is running Ubuntu 18.04. I use npm install --legacy-peer-deps as suggested by the original developer and the run npm start/npm run start. I encounter the following error from a whole bunch of files,
ERROR in ./src/components/ui/Task/Template/ReturnHomeTemplate.js
1:40-111 Module not found: Error: You attempted to import
/home/praneet/SevenHub/node_modules/react-refresh/runtime.js which
falls outside of the project src/ directory. Relative imports outside
of src/ are not supported. You can either move it inside src/, or add
a symlink to it from project's node_modules/.
In most of the files, the first line is
import React from "react";
and in some files it's not even that. Apparently the app does not use react-refresh explicitly anywhere.
There are warnings with npm install, but I was told that I can safely ignore them and don't have to audit fix them (I am new to react so I am not sure). I have tried reinstalling various node versions, removing node_modules and package-lock.json but am still unsuccessful in resolving the issue. Any pointers on this would be great, and happy to provide more information if necessary.
A few files where the error is thrown from for reference:
Index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import Header from "./components/ui/Header";
import { WorldProvider } from "./components/ui/ToolContext";
import { ROSProvider } from "./components/RosContext";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import UniversMap from "./components/ui/UniversMap/UniversMap";
import { Login } from "./components/ui/Login/Login";
import { FormantProvider } from "#formant/ui-sdk";
ReactDOM.render(
<WorldProvider>
<DndProvider backend={HTML5Backend}>
{/* <Login /> */}
<FormantProvider>
<App />
</FormantProvider>
</DndProvider>
</WorldProvider>,
document.getElementById("root")
);
Navigation.js
import React from "react";
import LiveTvSharpIcon from "#material-ui/icons/LiveTvSharp";
import EditSharpIcon from "#material-ui/icons/EditSharp";
import BorderHorizontalSharpIcon from "#material-ui/icons/BorderHorizontalSharp";
import StreetViewSharpIcon from "#material-ui/icons/StreetviewSharp";
import EqualizerSharpIcon from "#material-ui/icons/EqualizerSharp";
import ListAltSharpIcon from "#material-ui/icons/ListAltSharp";
import TodayOutlinedIcon from "#material-ui/icons/TodayOutlined";
import robotIcon from "../../assets/robotlogo.png";
import MapOutlinedIcon from "#material-ui/icons/MapOutlined";
import TaskItem from "./Taskitem";
import TaskTabs from "./../ui/TaskTabs";
import RobotList from "./Robots/RobotList";
import { userDemoData } from "./User/Users";
import Users from "./User/Users";
const routes = [
"/dashboard",
"/robots",
"/maps",
"/tasks",
"/users",
"/settings",
"/newmap",
];
const taskTabs = [{ id: 1 }];
const dashboardMappings = {
Live: <LiveTvSharpIcon />,
Layout: <EditSharpIcon />,
test: <EditSharpIcon />,
Zones: <BorderHorizontalSharpIcon />,
Streams: <StreetViewSharpIcon />,
Stats: <EqualizerSharpIcon />,
Logs: <ListAltSharpIcon />,
};
const taskList = [
{ id: 1, task: "sort", user: "A" },
{ id: 2, task: "Collaboration", user: "B" },
{ id: 3, task: "queue", user: "C" },
];
const robotList = [
{ id: 1, name: "Robot1" },
{ id: 2, name: "Robot2" },
];
const drawerMappings = {
dashboard: dashboardMappings,
robots: {
list: [<RobotList />],
icon: <img src={robotIcon} style={{ maxWidth: "24px" }} />,
active: [],
},
maps: {
list: ["Map1", "Map2", "Map3", "Map4"],
icon: <MapOutlinedIcon />,
active: [],
},
tasks: {
list: [<TaskTabs />], //taskTabs.map((item) => <TaskTabs />),
active: [],
},
// tasks: {
// list: taskList.map((item) => (
// <TaskItem task={item.task} id={item.id} user={item.user} />
// )),
// icon: <TodayOutlinedIcon />,
// disabled: true,
// active: [],
// },
users: {
list: [<Users />],
icon: <MapOutlinedIcon />,
active: [],
},
};
export { routes, dashboardMappings, drawerMappings, robotList };

Answer 1

It's hard to provide you with a proper solution, but we can investigate. Try these 3 things:
I) Reinstall node.
Remove node_modules, package-lock.json, yarn.lock (if you have it) from your project. Clear cache (npm cache clean --force).
Completely remove node from your computer (How to completely remove node.js from Windows).
Install node. Try the one that you have now (I may assume that the problem is not related to the node version).
Install packages in your project.
II) Issue with the path
Remove the line import robotIcon from "../../assets/robotlogo.png";. The error is related to importing the data outside of ./src directory, maybe the issue is here. If the number of errors will decrease, please, let me know.
III) Replace:
ReactDOM.render(
<WorldProvider>
<DndProvider backend={HTML5Backend}>
{/* <Login /> */}
<FormantProvider>
<App />
</FormantProvider>
</DndProvider>
</WorldProvider>,
document.getElementById("root")
);
with
ReactDOM.render(
<div>text</div>,
document.getElementById("root")
);
If the errors are left, provide the list. If the errors disappeared, try:
ReactDOM.render(
<WorldProvider>
<DndProvider backend={HTML5Backend}>
<FormantProvider>
<div>text</div>
</FormantProvider>
</DndProvider>
</WorldProvider>,
document.getElementById("root")
);
Removing the parts of the code, you will localize the error(s).
Also:
Provide the contents of the files where the errors appear (UniversMap.tsx, UserDetails.js, etc). So far, just index.js and Navigation.js are provided, they don't have the errors following your screenshot and they are less useful rather than files with the errors.
Text of all errors including the details provided with the number of the errors (not on a screenshot, but in a text format).