Question 38298 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

React app start error due to react refresh – Ubuntu

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 };

enter image description here

Tags:

2

Answers


  1. 0

    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).
    Login or Signup to reply.
  2. 0

    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

    I was also struggling this issue and spend hours to fix this, also check this related issue for more insights. Good luck !

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search