mini-css-extract-plugin: TypeError: url.replace is not a function

• Node Version: 16.4.2
• Yarn Version: 1.22.10
• webpack Version: 5.45.1
• mini-css-extract-plugin Version: 2.1.0
• css-loader Verion: 6.2.0
• @fortawesome/fontawesome-free" Version: 5.15.3
• css-minimizer-webpack-plugin: 3.0.2

Expected Behavior

Can Compiled successfully

Actual Behavior

Failed to compile

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: url.replace is not a function

Code

loader

const path = require('path');
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ],
      },
      {
        test: /\.vue(\.erb)?$/,
        use: { loader: 'vue-loader' },
        options: {     
          postcss: [require('postcss-cssnext')()]
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader',
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'font/[name].[ext]',
            },
          },
        ],
      },
    ]
  },
  plugins: [
    new webpack
      .ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/),
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin()
  ],
  resolve: {
    modules: [
      path.resolve('./app/javascript/'),
    ],
    alias: {
      '~components': path.resolve('./app/javascript/components'),
      '~commons': path.resolve('./app/javascript/commons'),
      '~configuration': path.resolve('./app/javascript/packs/configuration'),
      '~mixins': path.resolve('./app/javascript/mixins'),
      '~mutations': path.resolve('./app/javascript/mutations'),
      '~queries': path.resolve('./app/javascript/queries'),
      '~pages': path.resolve('./app/javascript/pages'),
      '~store': path.resolve('./app/javascript/store')
    },
    extensions: ['*', '.js', '.vue', '.json', '.css', '.sass', '.scss'],
  },
};

application.scss

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome'; <--- error in here

How Do We Reproduce?

Please Add css-loader and @fortawesome/fontawesome-free and mini-css-extract-plugin and version on Top then compile.