Как получить подходящий загрузчик для обработки этого типа файлов в Django?

Я только что начал проект django и реагировать. Всякий раз, когда я пытаюсь загрузить какой-либо css, будь то простой css или из бутстрапа, я получаю следующую ошибку: Я следовал следующему руководству: https://www.valentinog.com/blog/drf/ Я перемещаю свой .bablrc и свой webpack.config.js в корневую папку моего проекта. Раньше он находился в папке внешнего интерфейса. Пожалуйста, дайте мне знать, что мне не хватает!

ERROR in ./src/components/App.js 39:6
Module parse failed: Unexpected token (39:6)
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 (
>       <Table striped bordered hover>
|   <thead>
|     <tr>
 @ ./src/index.js 1:0-35

Ниже представлены мои файлы:

Мой webpack.config.js:

module.exports = {
    module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
      }
    };

Мой package.json:

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development ./src/index.js --output ./static/frontend/main.js",
    "build": "webpack --mode production ./src/index.js --output ./static/frontend/main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.4.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "ts-loader": "^6.2.2",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "^4.4.1",
    "classnames": "^2.2.6",
    "primeicons": "^2.0.0",
    "primereact": "^4.1.2",
    "react-bootstrap": "^1.0.0"
  }
}

Мой .babel.rc:

{
    "presets": [
        "@babel/preset-env", "@babel/preset-react"
    ],
    "plugins": [
        "plugin-proposal-class-properties"
    ]
}

Мой App.js:

import React, { Component } from "react";
import Table from 'react-bootstrap/Table'
import { render } from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import './app.css'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false,
      placeholder: "Loading"
    };
  }

  componentDidMount() {
    fetch("api/property")
      .then(response => {
        if (response.status > 400) {
          return this.setState(() => {
            return { placeholder: "Something went wrong!" };
          });
        }
        return response.json();
      })
      .then(data => {
        this.setState(() => {
          return {
            data,
            loaded: true
          };
        });
      });
  }

  render() {
    return (
      <Table striped bordered hover>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colSpan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</Table>
    );
  }
}

export default App;

const container = document.getElementById("app");
render(<App />, container);