反应-找不到模块

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

文件结构如下：

我希望方向正确一点