ERROR in Can't find self.__WB_MANIFEST in your SW source in TypeScript project

Library Affected: Current version: 5.1.3

Issue or Feature Request Description: When trying to build my webpack project, I run into the error ERROR in Can't find self.__WB_MANIFEST in your SW source.

I’ve tried some searching, but all the related issues don’t point me in the right direction and the docs are no help either.

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { InjectManifest } = require('workbox-webpack-plugin');

module.exports = (env = {}) => {
  const mode = env.production ? 'production' : 'development';
  const apiUrl = env.production
    ? 'https://xxx.cloudfunctions.net'
    : 'http://localhost:5001/xxx/us-central1';
  return {
    mode,
    entry: './src/index.tsx',
    output: {
      filename: `main${env.production ? '-[contenthash]' : ''}.js`,
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/',
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
      alias: { 'react-dom': '@hot-loader/react-dom' },
    },
    module: {
      rules: [
        {
          test: /\.(j|t)sx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: ['file-loader'],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: 'src/index.html',
      }),
      new webpack.DefinePlugin({
        mode,
        API_URL: JSON.stringify(apiUrl),
      }),
      new InjectManifest({
        swSrc: path.resolve(__dirname, './service-worker.ts'),
      }),
    ],
    devServer: {
      historyApiFallback: true,
    },
  };
};

service-worker.ts

// Listen for install event, set callback
self.addEventListener('install', function (event) {
  console.log('installed');
});

index.ts

...
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('/service-worker.js')
      .then((registration) => {
        console.log('SW registered: ', registration);
      })
      .catch((registrationError) => {
        console.log('SW registration failed: ', registrationError);
      });
  });
}
...

However, the process seems to work correctly. When I serve my page, I see the installed console log, and all other project functionality works as well.

Any idea what the root cause of this issue is?