Почему sass-загрузчик не работает при использовании response-router-dom?

Question

Я работаю в React и использую Sass для CSS. В настоящее время я пытаюсь использовать response-router-dom для управления маршрутизацией, но с этим что-то не так. У меня есть приложение, которое выглядит так:

function App() {
  return (
    <>
      <Header />
      <Router>
      <div className={styles.grad}>
        <div className={styles.centered}>
          <div className={styles.blueBox}>
            <Link to="music">music</Link>
          </div>
          <div className={styles.redBox}>
            <Link to="visuals">visuals</Link>
          </div>
          <div className={styles.greenBox}>
            <Link to="shop">shop</Link>
          </div>
          <div className={styles.purpleBox}>
            <Link to="about">about</Link>
          </div>
        </div>
      </div>

      <Switch>
        <Route path="/music">
          <Music />
        </Route>
        <Route path="/visuals">
          <Visuals />
        </Route>
        <Route path="/shop">
          <Shop />
        </Route>
        <Route path="/about">
          <About />
        </Route>
      </Switch>

      </Router>
      <Footer />
    </>
  );
}

export default App;

, но я получаю эту ошибку:

Module parse failed: Unexpected token (7:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     render() {
|         return (
>             <div className={styles.footer}>
|                 Footer stuff goes here...
|             </div>

, и самое странное в том, что оно прекрасно компилируется, если я закомментирую переключатель компонент и все вложенное в него. РЕДАКТИРОВАТЬ: эта ошибка происходит из файла Footer.tsx.

Я попытался настроить webpack.config. js и переустановить мои sass-загрузчики.

для справки, все мои компоненты, которые я пытаюсь направить, выглядят так:

export class Shop extends Component {
  render() {
    return (
      <>
        <Header />
        <Footer />
      </>
    );
  }
}

просто простые компоненты, которые отображают верхний и нижний колонтитулы.

Редактировать: код для нижнего колонтитула, выдавшего ошибку.

import React, { Component } from 'react'
import styles from './styles.module.scss'

export class Footer extends Component {
    render() {
        return (
            <div className={styles.footer}>
                Footer stuff goes here...
            </div>
        )
    }
}

и соответствующий файл s css:

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10%;
    background-color: transparent;
    color: white;
    text-align: center;
    z-index: -3;
  }