Шаблон Django не отображает компонент React

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

Если я помещаю что-либо в HTML (например, текст) файл, он отображается. Но никаких компонентов react на нем нет.

Webpack.config

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development"),
      },
    }),
  ],
};

HTML

<body>
    {% load static %}
    <div id="main">
        <div id="app">
        </div>
    </div>
    <script src="{% static 'frontend/main.js' %}"></script>
</body>

Реакция

import React, { Component } from "react";
import ReactDOM from 'react-dom';
export default class App extends Component(){
    constructor(props){
        super(props);
    }
    render(){
        return <h1> Site Placeholder </h1>
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

В index.js просто есть импорт:

import App from "./components/App";

Views просто рендерит index.html

def index(request, *args, **kwargs):
    return render(request, 'frontend/index.html')

Я не получаю никаких ошибок нигде, но мой html пуст. В chrome inspect я вижу, что создается файл main.js и отправляется в статические источники, но ничего из этого не отображается.

export default class App extends Component{...}

Вместо

export default class App extends Component(){...}
Вернуться на верх