Модуль не найден: не удается разрешить './components/DisplayEvent' в 'C: \ laragon \ www\eventmanagerreact \ src \ components'

Question

Я работаю над простым приложением CRUD React. js и Laravel, и я получил эту ошибку: Модуль не найден: Не удается разрешить './components/DisplayEvent' в 'C: \ laragon \ www\eventmanagerreact \ src \ components '

Я использую перехватчики реакции для компонента EventNavbar (это простая строка меню):

import React from 'react';
import DisplayEvent from './components/DisplayEvent';
import { AppBar, Tabs, Tab } from '@material-ui/core';
import Typography from '@material-ui/core/Typography';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';

export default function EventNavbar(props) {


    const classes = useStyles();
    const [value, setValue] = React.useState(0);

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };
    return (
        <div className={classes.root}>
            <AppBar position="static">
                <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
                    <Tab label="Events" {...a11yProps(0)} />
                    <Tab label="Create Event" />
                    <TabPanel value={value} index={0}>


                        <div className="App">
                            <DisplayEvent
                                events={this.state.events}
                                onDelete={this.onDelete}
                                onEdit={this.onEdit}
                            />
                        </div>
                    </TabPanel>
                </Tabs>
            </AppBar>

        </div>
    )

}


function TabPanel(props) {
    const { children, value, index, ...other } = props;

    return (
        <Typography
            component="div"
            role="tabpanel"
            hidden={value !== index}
            id={`simple-tabpanel-${index}`}
            aria-labelledby={`simple-tab-${index}`}
            {...other}
        >
            {value === index && <Box p={3}>{children}</Box>}
        </Typography>
    );
}
TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
};

function a11yProps(index) {
    return {
        id: `simple-tab-${index}`,
        'aria-controls': `simple-tabpanel-${index}`,
    };
}

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.paper,
    },
}));

Вот DisplayEvent. js файл:

import React, { Component } from 'react';
import Event from './Event';
import axios from 'axios';

class DisplayEvent extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '', events: '' };
  }
  onDelete = id => {
    // console.log("event list ", id);
    this.props.onDelete(id);
  };

  onEdit = id => {
    // console.log("event list ", id);
    this.props.onEdit(id);
  };

  componentDidMount() {
    axios.get('http://127.0.0.1:8000/api/events')
      .then(response => {
        this.setState({ events: response.data });
      })
      .catch(function (error) {
        console.log(error);
      })
  };



  render() {
    const events = this.props.events;
    return (
      <div>
        <h1>Events</h1>




        <table className="table table-hover">
          <thead>
            <tr>
              <td>ID</td>
              <td>Event Name</td>
              <td>Event Description</td>
              <td width="200px">Actions</td>
            </tr>
          </thead>
          <tbody>
            {events.map(event => {
              return (
                <Event
                  key={event.id}
                  event={event}
                  onDelete={this.onDelete}
                  onEdit={this.onEdit}
                />
              )
            })}

          </tbody>
        </table>
      </div>
    )
  }
}
export default DisplayEvent;

А это приложение. js файл

import React from 'react';
import { Component } from 'react';
import axios from 'axios';
import './App.css';

import EventNavbar from './components/EventNavbar';

class App extends Component {
  state = {
    events: [],
    loader: false,
    event: {},
    url: "http://127.0.0.1:8000/api/events"
  };
  getEvents = async () => {
    this.setState({ loader: true });
    const events = await axios.get(this.state.url);
    this.setState({ events: events.data, loader: false });
  };
  deleteEvent = async id => {
    this.setState({ loader: true });

    await axios.delete(`${this.state.url}/${id}`).catch(e => {
      // console.log(e.message);
      alert(e.response.status === 404 ? "Event not found" : "");
    });

    this.getEvents();
  };
  editEvent = async data => {
    // clear event obj
    this.setState({ event: {} });

    this.setState({ loader: true });

    await axios
      .put(`${this.state.url}/${data.id}`, {
        first_name: data.first_name,
        last_name: data.last_name,
        email: data.email
      })
      .catch(e => {
        console.log(e.message);
      });

    this.getEvents();
  };
  onDelete = id => {
    // console.log("app ", id);
    this.deleteEvent(id);
  };

  onEdit = data => {
    // console.log("app ", data);
    this.setState({ event: data });
  };

  componentDidMount() {
    this.getEvents();
  };
  render() {
    return (
      <div>
        <EventNavbar />

      </div>
    );
  }
}

export default App;