因此，我尝试在本地运行一个React应用程序，它最初是在Windows上开发的，在我运行Ubuntu 18.04的系统上。我按照最初开发人员的建议使用npm install --legacy-peer-deps，并运行npm start/npm run start。我在一大堆文件中遇到以下错误，
错误位于：/src/components/ui/任务/模板/返回主页模板. js 1：40-111未找到模块：错误：您尝试导入的/home/praneet/SevenHub/node_modules/react-refresh/runtime.js福尔斯项目src/目录中。不支持在src/外部进行相对导入。您可以将其移到src/内部，也可以从项目的node_modules/向其添加符号链接。
在大多数文件中，第一行是

import React from "react";

在一些文件中甚至不是这样。显然，应用程序在任何地方都没有显式地使用React刷新。
安装npm时会有警告，但我被告知可以安全地忽略它们，并且不必审计修复它们（我是第一次对此做出React，所以我不确定）。我尝试过重新安装各种节点版本，删除node_modules和package-lock.json，但仍然无法解决问题。任何关于此问题的指针都很好，如果需要，我很乐意提供更多信息。
引发错误的几个文件可供参考：
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 };