ELIFECYCLE error with Webpack + React + Typescript

Question

quite new to bundling modules using Webpack but trying it out. I have a very simple project that I'm trying to bundle up to display it. Running a build script gives me the mysterious error:

$ npm run build

> react-extension-from-scratch@1.0.0 build /path/to/react-extension-from-scratch
> webpack --mode production

[webpack-cli] Compilation finished
assets by status 126 KiB [cached] 2 assets
orphan modules 196 bytes [orphan] 1 module
modules by path ./node_modules/ 133 KiB
  modules by path ./node_modules/react/ 6.48 KiB
    ./node_modules/react/index.js 190 bytes [built] [code generated]
    ./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
  modules by path ./node_modules/react-dom/ 119 KiB
    ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
    ./node_modules/react-dom/cjs/react-dom.production.min.js 118 KiB [built] [code generated]
  modules by path ./node_modules/scheduler/ 4.91 KiB
    ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
    ./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB [built] [code generated]
  ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
./src/index.tsx + 1 modules 453 bytes [built] [code generated]
1 ERROR in child compilations
webpack 5.11.0 compiled with 1 error in 2831 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-extension-from-scratch@1.0.0 build: `webpack --mode production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react-extension-from-scratch@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /path/to/logfile.log

Below is my Webpack config:

import path from 'path';
import webpack from 'webpack';
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const config: webpack.Configuration = {
  context: __dirname,
  devServer: {
    contentBase: './src',
    historyApiFallback: true,
  },
  entry: {
    app: './src/index.tsx',
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ['html-loader'],
      },
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
          },
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html'),
    }),
    new CopyPlugin({
      patterns: [{ from: './src/manifest.json', to: '[name].[ext]' }],
    }),
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  stats: {
    errorDetails: true,
  },
};

export default config;

Curiously enough, the build works fine if I remove the template from the HtmlWebpackPlugin's arguments (but obviously it doesn't then add the index.html file I want into the build directory).

For context, the idea is quite simple: In my src directory, I have an index.html file that has a div with an id that I inject some React code into. When building this, I'd like to bundle the index.html into the build directory and have it link to the generated bundle.js file so that the React code runs right away. I know I can use the CopyWebpackPlugin to achieve this but would have to manually include the bundle.js in it, which is fine for this toy project but would not want to do this for a more complicated project.

Anyone got ideas?