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/[email protected]
│ └─┬ @pmmmwh/[email protected]
│   └── [email protected]
├─┬ @storybook/[email protected]
│ ├── @pmmmwh/[email protected] deduped
│ └── [email protected]
└─┬ [email protected]
  ├── @pmmmwh/[email protected] deduped
  └── [email protected]

You might can temporary fix this issue by installing react-refresh as dev dependency by npm install -D [email protected]. 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

Simply add this section to your package.json file

"overrides": {
    "react-refresh": "^0.14.2"
}

if you still get error check the latest react-refresh version