Реакция - модуль не найден

Question

Мой проект не компилируется и выдает ошибку Модуль не найден, когда я пытаюсь импортировать представление <Home /> в макет <App />.Вот мой код App.js

 import React, { Component } from 'react';
 import ReactImage from '../assets/images/react.png';
 import '../assets/css/app.css';
 import Home from '../views/Home';

 export default class App extends Component {
 state = { username: null };

 componentDidMount() {
 fetch('/api/getUsername')
  .then(res => res.json())
  .then(user => this.setState({ username: user.username }));
 }

render() {
 const { username } = this.state;
  return (
   <div>
     {username ? <h1>{`Hello ${username}`}</h1> : <h1>Loading.. please wait! </h1>}
     <img src={ReactImage} alt="React" />
     <Home />
   </div>
  );
 }
}

Мой Home.js так прост:

import React from 'react';
import Sidebar from '../components/Sidebar';

function Home() {
  return <Sidebar />;
}

export default Home;

<Sidebar /> выглядит так:

import React, { Component } from 'react';
import '../assets/css/components-css/sidebar.css';

export default class Sidebar extends Component {
  state = null;

  render() {
    return (
      <div>
         <h1>This is the sidebar</h1>
      </div>
    );
  }
}

Структура файла выглядит примерно так:

Буду признателен за точку в правильном направлении