Не удалось скомпилировать React. Модуль не найден: не удается решить, как скомпилировать с помощью реактивного маршрутизатора?

Я имею дело с проблемой в двух новых проектах, которые я только что начал, и я настроил их так, как на другом в производстве, и по какой-то причине я не могу найти здесь ошибку.

Я начал свой проект реагирования с последней версии create-react-app, используя: npx create-react-app myapp, и по какой-то причине мое приложение не компилируется локально с react-router-dom.

Вот мои зависимости в моем package.json:

"dependencies": {
    "react": "^16.8.6",
    "react-bootstrap": "^0.32.4",
    "react-dom": "^16.8.6",
    "react-router-dom": "^4.3.1",
    "react-scripts": "3.0.1"

У меня есть файл index.js, в котором я помещаю свой компонент <App /> внутрь компонента <Router />, который я импортирую с помощью BrowserRouter, как указано в react-router-dom.

Вот содержимое моего index.js файла:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

Оттуда мой компонент <App /> реализует пользовательский компонент <Routes />, который использует Route и Switch из react-router-dom для удовлетворения потребностей маршрутизации моего приложения.

Вот содержимое моего компонента <App />:

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Navbar } from "react-bootstrap";
import Routes from "./Routes.js";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className = "App container">
        <Navbar fluid collapsOnSelect>
          ...... misc navbar code
        </Navbar>
        <Routes />
      </div>
      );
  }
}

export default App;

Вот как выглядит мой файл Routes.js и как он использует Route и Switch из react-router-dom:

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";

export default () => <Switch>
                       <Route path = "/" exact component = { Home } />
                     </Switch>;

Вот компонент { Home }, который я пытаюсь обслуживать локально:

import React, { Component } from "react";
import "./Home.css";

export default class Home extends Component {
  render() {
    return (
      <div className = "Home">
        <div className = "LandingPage">
          ... random html code
        </div>
      </div>
      );
  }
}

И, наконец, вот ошибка:

Как вы думаете, в чем здесь может быть проблема??? Спасибо !

ОБНОВЛЕНИЕ: добавление иерархии файлов