Webpack throws an error when refreshing the page on a dynamic route

I use React Router + Webpack in my project. When I try to refresh the page on a dynamic route it throws this error:

Refused to execute script from ‘http://localhost:3000/history/bundle.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.

Mind you, bundle.js exists in the root of the project, not history thus the error. The problem is obviously in the Webpack config. It searches for bundle inside a relative dir and ofc can’t find one on a dynamic route. But how does one specify an absolute path? I played around a bit but couldn’t put my finger on it. Here’s the config:

module.exports = {
  mode: 'development',
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  entry: {
    bundle: path.resolve(__dirname, 'src/index.tsx'),
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
    clean: true,
    assetModuleFilename: '[name][ext]',
  },
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'build'),
    },
    port: 3000,
    open: true,
    hot: true,
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.tsx?/,
        use: 'babel-loader',
      },
      {
        test: /\.scss/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new HtmlPlugin({
      template: path.resolve(__dirname, 'public/index.html'),
    }),
    new RefresherPlugin(),
  ],
};

>Solution :

Add publicPath in the output section of the webpack.config.js file

output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
    publicPath: '/',
    clean: true,
    assetModuleFilename: '[name][ext]',
}