When running yarn build, the Output file is not getting generated with Webpack 5 and throwing MIME type error in console using ReactJS application

Question

I am working with upgrading Node.js version from 16.x to 18.16.1 and webpack version from 4.x to 5.x. and then configuring respective webpack.config.js file where facing MIME type issue and looks output file is not getting generated.

yarn build and yarn dev are running successfully there is no any compilation and build errors in the terminal.

Here is my package.json and the webpack.config.js file code snippet. Checked all the configurations as per the documents but not sure where is the gap or miss in configuration. please bare to take a look as the code is little long.

package.json

{
  "devDependencies": {
    "@babel/core": "7.14.6",
    "@babel/plugin-proposal-optional-catch-binding": "7.14.5",
    "@babel/preset-env": "7.14.7",
    "@types/lodash": "4.14.165",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.0.11",
    "@types/styled-components": "4.4.0",
    "@typescript-eslint/eslint-plugin": "4.28.3",
    "@typescript-eslint/parser": "4.28.3",
    "ansi-colors": "4.1.1",
    "autoprefixer": "9.8.0",
    "babel-loader": "9.1.2",
    "clean-webpack-plugin": "3.0.0",
    "copy-webpack-plugin": "6.0.2",
    "cross-env": "7.0.3",
    "css-loader": "6.8.1",
    "css-minimizer-webpack-plugin": "5.0.1",
    "dojo-typings": "1.11.10",
    "dojo-webpack-plugin": "3.0.5",
    "eslint": "7.30.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-import-resolver-typescript": "2.4.0",
    "eslint-plugin-compat": "3.9.0",
    "eslint-plugin-import": "2.23.4",
    "eslint-plugin-prettier": "3.4.0",
    "eslint-plugin-react": "7.24.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "eslint-plugin-sort-keys-fix": "1.1.1",
    "file-loader": "6.2.0",
    "image-webpack-loader": "6.0.0",
    "imagemin-pngquant": "5.0.1",
    "mini-css-extract-plugin": "2.7.6",
    "ncp": "2.0.0",
    "node-polyfill-webpack-plugin": "2.0.1",
    "node-sass": "8.0.0",
    "npm-run-all": "4.1.5",
    "postcss-inline-svg": "4.1.0",
    "postcss-loader": "3.0.0",
    "prettier": "2.3.2",
    "raw-loader": "4.0.2",
    "svg-url-loader": "8.0.0",
    "sass-loader": "13.2.0",
    "style-loader": "3.3.1",
    "stylelint": "12.0.0",
    "stylelint-config-recommended-scss": "4.1.0",
    "stylelint-config-standard": "19.0.0",
    "stylelint-scss": "3.13.0",
    "terser-webpack-plugin": "5.3.9",
    "ts-loader": "9.4.3",
    "tsconfig-paths-webpack-plugin": "4.0.1",
    "typescript": "4.2.3",
    "util": "0.12.5",
    "webpack": "5.85.1",
    "webpack-cli": "5.1.3",
    "webpack-merge": "5.2.0",
    "webpack-sources": "2.0.1"
  },
  "scripts": {
    "buildLocal": "run-s build:l10n build:webpackLocal",
    "build:webpackLocal": "cross-env NODE_OPTIONS=\"--max_old_space_size=8192\" NODE_ENV=production webpack --progress",
    "build": "cross-env NODE_ENV=production run-s build:l10n build:webpack",
    "build:webpack": "node --max_old_space_size=8192 ./node_modules/webpack/bin/webpack.js",
    "build:l10n": "node ./build-utilities/pre-build.js",
    "dev": "cross-env NODE_ENV=development run-s build:l10n dev:webpack",
    "dev:webpack": "webpack --watch --env=development --progress",
    "lint": "eslint packages/app/src --ext .ts,.tsx --ignore-path ./.eslintignore",
    "lint:fix": "eslint packages/app/src --ext .ts,.tsx --ignore-path ./.eslintignore --fix"
  },
  "resolutions": {
    "image-webpack-loader": "6.0.0",
    "imagemin-pngquant": "5.0.1"
  }
}

webpack.config.js

const fs = require('fs');
const { resolve } = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const DojoWebpackPlugin = require('dojo-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const devConfig = require('./build-utilities/webpack.dev');
const prodConfig = require('./build-utilities/webpack.prod');
const appTSConfig = resolve(__dirname, `./packages/app/tsconfig.json`);

module.exports = (env = 'production', argv) => {
  const destination = argv.dest ? argv.dest : '../GUI-Impl/WebContent/dist';
  const publicPath = '/gui/dist/';

// For development only, use style-loader to inject styles - For production, use MiniCssExtractPlugin.loader
  const styleLoader = (env === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader);

  /** @type {import('webpack').Configuration} */
  const config = {
    cache: true,
    name: 'gui-client',
    entry: `./packages/app/src/app.ts`,
    output: {
      filename: '[name].js',
      path: resolve(__dirname, destination),
      publicPath: publicPath,
    },
    stats: 'verbose',
    optimization: {
      chunkIds: 'named',
      splitChunks: { chunks: 'all' },
      minimize: true,
      minimizer: [new CssMinimizerPlugin()]
    },
    resolve: {
      alias: {
        classnames: resolve(__dirname, 'node_modules/classnames'),
        handlebars: 'handlebars/dist/handlebars.min.js',
        lodash: resolve(__dirname, 'node_modules/lodash'),
        tslib: resolve(__dirname, 'node_modules/tslib'),
        dijit: resolve(__dirname, 'packages/dijit'),
        dojo: resolve(__dirname, 'packages/dojo'),
        evo: resolve(__dirname, 'packages/evo'),
        evox: resolve(__dirname, 'packages/evox'),
        gridx: resolve(__dirname, 'packages/gridx'),
        'gui-shared': resolve(__dirname, '../../Common-Utilities/Common-Utilities-Javascript'),
        tpc: resolve(__dirname, 'packages/app/src/tpc'),
        util: resolve(__dirname, 'packages/util')
      },
      modules: [resolve(__dirname, 'packages/app/src'), 'node_modules'],
      extensions: ['.ts', '.tsx', '.js', '.jsx' ],
      plugins: [new TsconfigPathsPlugin({ configFile: appTSConfig })],
      fallback: {
        util: false,
      }
    },
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            styleLoader,
            'css-loader',
            'postcss-loader',
            {
              loader: 'sass-loader',
              options: {
                sassOptions: {
                  includePaths: ['node_modules']
                }
              }
            }
          ]
        },
        {
          test: /\.css$/i,
          use: [styleLoader, 'css-loader', 'postcss-loader']
        },
        {
          loader: 'ts-loader',
          test: /\.ts(x?)$/,
          options: { configFile: appTSConfig }
        },
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components|dojo)/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: [['@babel/preset-env', { loose: true, modules: false }]],
              plugins: ['@babel/plugin-proposal-optional-catch-binding']
            }
          }
        },
        {
          test: /\.(txt|xml)$/i,
          use: 'raw-loader'
        },
        {
          test: /\.(png|jpe?g|gif|cur|ico)$/i,
          use: [
            
            {
              loader: 'file-loader',
              options: {
                name: '[name][contenthash].[ext]',
                outputPath: 'images'
              }
            }
          ]
        },
        {
          test: /\.svg$/i,
          use: [
            {
              loader: 'svg-url-loader',
              options: {}
            }
          ]
        },
        {
          test: /\.(eot|woff2?|ttf)?$/i,
          use: [
            
            {
              loader: 'file-loader',
              options: {
                name: '[name][contenthash].[ext]',
                outputPath: 'fonts'
              }
            }
          ]
        }
      ]
    },
    plugins: [
      // Clean dist directory
      new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
      // Special exception, certain files need to be copied over
      new CopyPlugin({
        patterns: [
          {
            from: 'packages/dojo/resources/blank.gif',
            to: 'dojo/resources'
          },
          {
            from: 'packages/evo/grid/templates/GenericGridFooter.jsp',
            to: 'evo/grid/templates/GenericGridFooter.jsp'
          },
          {
            from: 'packages/evo/grid/templates/HeaderMenu.jsp',
            to: 'evo/grid/templates/HeaderMenu.jsp'
          },
          {
            from: 'packages/evo/grid/templates/Search.jsp',
            to: 'evo/grid/templates/Search.jsp'
          },
          {
            from: 'packages/evo/grid/templates/SelectAll.jsp',
            to: 'evo/grid/templates/SelectAll.jsp'
          },
          {
            from: 'packages/app/src/tpc/assets/actions/optimize/storageData/templates/CapacityPoolsGrid.jsp',
            to: 'tpc/assets/actions/optimize/storageData/templates/CapacityPoolsGrid.jsp'
          },
          {
            from: 'packages/app/src/tpc/table/_grid/templates/GenericGridFooter.jsp',
            to: 'tpc/table/_grid/templates/GenericGridFooter.jsp'
          },
          {
            from: 'packages/app/src/tpc/table/_grid/templates/Grid.jsp',
            to: 'tpc/table/_grid/templates/Grid.jsp'
          },
          {
            from: 'packages/app/src/tpc/table/_grid/templates/LocalGrid.jsp',
            to: 'tpc/table/_grid/templates/LocalGrid.jsp'
          }
        ]
      }),
      // Main Dojo-Webpack plugin that allows us to bundle our dojo-based dependencies
      new DojoWebpackPlugin({
        // async: true,
        loaderConfig: require('./build-utilities/dojo-loader-config.js'),
        environment: {
          // used at run time for non-packed resources (e.g. blank.gif)
          dojoRoot: 'dist',
          version: process.env.productVersion
        },
        buildEnvironment: {
          // used at build time
          dojoRoot: 'packages'
        },
        locales: ['en', 'cs', 'de', 'es', 'fr', 'hu', 'it', 'ja', 'ko', 'pl', 'pt', 'ru', 'zh'],
        noConsole: true
      }),
      new webpack.NormalModuleReplacementPlugin(/^dojox\/gfx\/renderer!/, 'dojox/gfx/svg'),
      new webpack.NormalModuleReplacementPlugin(/^jsp!/, function (data) {
        var match = /^jsp!(.*)$/.exec(data.request);
        data.request = 'dojo/loaderProxy?loader=dojo/text&name=dist/' + match[1] + '&absMid=dojo/text%21' + match[1] + '!';
      }),
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: '[name].css',
        chunkFilename: '[id].css'
      }),
      new CssMinimizerPlugin({}),
      new NodePolyfillPlugin({})
    ],
  };

  return merge.mergeWithCustomize({
    customizeObject: merge.customizeObject({
      entry: 'prepend'
    })
  })(config, env === 'development' ? devConfig : prodConfig);
};

I have tried with asset module approach as well in webpack.config.js file but no luck still the issue persists.. Also tried adding image-webpack-loader in the configurations but that doesnt works out. Just need some light on this issue to get it fixed that would be really helpful. Thanks