React app start error due to react refresh

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

If @dragomirik answer not fixing this issue, try this as well.

This issue is mostly happening due to version mismatch issue of react-refresh

Try to run npm ls react-refresh. You'll get a deps-tree like below, and check which has different version of react-refresh

for example in my terminal,

├─┬ @storybook/preset-create-react-app@4.1.2
│ └─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.10
│   └── react-refresh@0.14.0
├─┬ @storybook/react@6.4.19
│ ├── @pmmmwh/react-refresh-webpack-plugin@0.5.10 deduped
│ └── react-refresh@0.11.0
└─┬ react-scripts@5.0.0
  ├── @pmmmwh/react-refresh-webpack-plugin@0.5.10 deduped
  └── react-refresh@0.11.0

You might can temporary fix this issue by installing react-refresh as dev dependency by npm install -D react-refresh@0.11.0. or running npm dedupe

[EDIT]: you can use overrides in package.json as well

{

  "dependencies": {
    ...
  },
  "devDependencies": {
    ....
  },
  "overrides": {  
    "react-refresh": "version"
  }
}

I was also struggled with this issue and spent hours to fix this, also check this related issue for more insights. Good luck !

Answer 2

It's hard to provide you with a proper solution, but we can investigate. Try these 3 things:

I) Reinstall node.

1. Remove node_modules, package-lock.json, yarn.lock (if you have it) from your project. Clear cache (npm cache clean --force).
2. Completely remove node from your computer (How to completely remove node.js from Windows).
3. Install node. Try the one that you have now (I may assume that the problem is not related to the node version).
4. 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:

1. 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.
2. Text of all errors including the details provided with the number of the errors (not on a screenshot, but in a text format).