[v4] Regression when using Workers with contenthash in output name -- attempts to look up worker.undefined.js

[birtles]

• This is a bug
• This is a modification request

Code

webpack.config.js

// webpack.config.js
// (omitting requires)

const plugins = [
  new webpack.DefinePlugin({
    __RELEASE_STAGE__: `'${stage}'`,
  }),
  new CleanWebpackPlugin(),
  new CopyWebpackPlugin({
    patterns: [
      {
        from: '**/*',
        context: path.resolve(__dirname, 'assets', stage),
      },
    ],
  }),
  new HtmlWebpackPlugin({ template: './src/index.html', url }),
  new MiniCssExtractPlugin({ filename: '10ten.[contenthash].css' }),
];

module.exports = {
  mode,
  devtool: mode === 'production' ? 'source-map' : 'eval-source-map',
  entry: {
    'main': ['./src/index.tsx'],
  },
  resolve: {
    alias: {
      react: 'preact/compat',
      'react-dom/test-utils': 'preact/test-utils',
      'react-dom': 'preact/compat',
    },
    extensions: ['.ts', '.tsx', '.js'],
  },
  optimization: {
    splitChunks: {
      minChunks: 2,
    },
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: '/',
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'ts-loader',
      },
      {
        test: /\.css?$/,
        exclude: /node_modules/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          {
            loader: 'css-loader',
            options: {
              url: false,
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
          },
        ],
      },
    ],
  },
  plugins,
};

I am including the worker as follows:

const dbWorker = new Worker(new URL('./worker', import.meta.url), {
  /* webpackChunkName: 'db-worker' */
  type: 'module',
});

Please paste the results of webpack-cli info and webpack-cli version here, and mention other relevant information

yarn webpack-cli info
  System:
    OS: Linux 4.19 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (16) x64 Intel(R) Xeon(R) CPU E5-2637 v4 @ 3.50GHz
    Memory: 19.90 GB / 24.98 GB
  Binaries:
    Node: 14.16.0 - /tmp/yarn--1629418188271-0.35872703965539743/node
    Yarn: 1.22.5 - /tmp/yarn--1629418188271-0.35872703965539743/yarn
    npm: 7.19.1 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Packages:
    clean-webpack-plugin: ^3.0.0 => 3.0.0
    copy-webpack-plugin: ^9.0.1 => 9.0.1
    html-webpack-plugin: ^5.3.2 => 5.3.2
    webpack: ^5.50.0 => 5.50.0
    webpack-cli: ^4.8.0 => 4.8.0
    webpack-dev-server: ^3.11.2 => 3.11.2
    webpack-merge: ^5.8.0 => 5.8.0

$ yarn webpack-cli version
webpack 5.50.0
webpack-cli 4.8.0
webpack-dev-server 3.11.2

Expected Behavior

The worker is loaded.

Looking at the webpack output, it appears to be generated correctly:

  asset db-worker.5f92a35b963c46fa4ad8.js 722 KiB [emitted] [immutable] (name: db-worker)

Furthermore, when not using dev server it is correctly referenced and loaded.

Actual Behavior

When using dev-server it attempts to look up db-worker.undefined.js which returns 404.

After downgrading to 3.11.2 it works again.

For Bugs; How can we reproduce the behavior?

The above configuration should do it. If that proves insufficient I will try to make time to create a minimal repro.

For Features; What is the motivation and/or use-case for the feature?

n/a

[alexander-akait]

Not related to webpack-dev-server, already reported to webpack itself

[alexander-akait]

Here webpack/webpack#13801 (comment)