Issue with importing react components

Question

I have an issue where I changed the folder configuration of my components and changed the import paths, and now I get Module not found: Can't resolve '../App' in C: whatever, even though my file paths are correct.

import Header from "./Components/MiscComponents/Header";
import Users from "./Components/UsersDisplay/Users";
import User from "./Components/UsersDisplay/User";
import Login from "./Components/MiscComponents/Login";
import EditOrCreateUser from "./Components/CreateEditUser/EditOrCreateUser";

/App is in src folder same as Components folder. What could cause this issue. It worked perfectly before I moved the files around and changed import paths.

./src/Components/CreateEditUser/EditOrCreateUser.jsx Module not found: Can't resolve '../App' in 'C:\Users\Veljko\Desktop\React\users-challenge\src\Components\CreateEditUser'

is the complete error and this is snap of my folder structure

this is EditOrCreateUser component

import React from "react";
import { PropContext } from "../App";
import { useState, useContext } from "react";
import { Redirect } from "react-router-dom";
import TextField from "@material-ui/core/TextField";
import { Button, Box } from "@material-ui/core";

function EditOrCreateUser(props) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [redirect, setRedirect] = useState(false);
  const { data, editOrCreate } = useContext(PropContext);
  const user = data.find((e) => props.match.params.id == e.id);
  const emailIsValid = () =>
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
      email
    );

  const editUser = () => {
    if (emailIsValid() && name) {
      fetch("https://jsonplaceholder.typicode.com/users", {
        method: "PATCH",
        body: JSON.stringify({
          name: name,
          email: email,
        }),
        headers: {
          "Content-type": "application/json; charset=UTF-8",
        },
      }).then((response) => {
        if (response.ok) setRedirect(true);
        else alert(`request failed ${response.status}`);
      });
    } else alert("Name required or invalid email");
  };

  const createUser = () => {
    if (emailIsValid() && name) {
      fetch("https://jsonplaceholder.typicode.com/users", {
        method: "POST",
        body: JSON.stringify({
          name: name,
          email: email,
        }),
        headers: {
          "Content-type": "application/json; charset=UTF-8",
        },
      }).then((response) => {
        if (response.ok) setRedirect(true);
        else alert(`request failed ${response.status}`);
      });
    } else alert("Name required or invalid email");
  };

  return redirect ? (
    <Redirect to="/users" />
  ) : (
    <Box
      display="flex"
      flexDirection="column"
      alignItems="center"
      style={{ marginTop: "10px" }}
    >
      <TextField
        style={{ margin: "2px" }}
        variant="outlined"
        color="secondary"
        value={name}
        onChange={(e) => setName(e.target.value)}
        type="text"
        required
      />
      <TextField
        style={{ margin: "2px" }}
        variant="outlined"
        color="secondary"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        type="email"
        required
      />
      {editOrCreate ? (
        <Button
          style={{ margin: "2px" }}
          variant="contained"
          color="secondary"
          onClick={() => editUser()}
        >
          Edit
        </Button>
      ) : (
        <Button
          style={{ margin: "2px" }}
          variant="contained"
          color="secondary"
          onClick={() => createUser()}
        >
          Create
        </Button>
      )}
    </Box>
  );
}

export default EditOrCreateUser;

Answer 1

Here is the error: import { PropContext } from "../App";

Firstly, I don't think you have exported anything from App.js folder. Even if you have something exported from there it should be imported as:

import { PropContext } from '../../App'

Answer 2

The components are created as Jsx files in your folders. Try using-

 import Header from "./Components/MiscComponents/Header.jsx";
 import Users from "./Components/UsersDisplay/Users.jsx";
 import User from "./Components/UsersDisplay/User.jsx";
 import Login from "./Components/MiscComponents/Login.jsx";
 import EditOrCreateUser from "./Components/CreateEditUser/EditOrCreateUser.jsx";

Only 'js' files take automatic imports without mention. This should work I think.