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.

[alexander-akait]

Thanks I will look at this in near future

[alexander-akait]

Bug in webpacker, go to node_modules/@rails/webpacker/package/rules/svg.js and change content on:

/* eslint global-require: 0 */
/* eslint import/no-dynamic-require: 0 */

module.exports = {
  test: /\.svg$/i,
  type: 'asset/inline',
  generator: {
    dataUrl: (content) => {
      let optimisedContent = content

      try {
        if (require.resolve('mini-svg-data-uri')) {
          const svgToMiniDataURI = require('mini-svg-data-uri')
          optimisedContent = svgToMiniDataURI(content.toString())
        }
      } catch (e) {
        /* Work out what to print here */
      }

      return optimisedContent.toString()
    }
  }
}

dataUrl should return string, not Buffer https://github.com/webpack/webpack/blob/main/types.d.ts#L278, sorry we can’t fix it here

Also if you faced with this issue most likely a problem:

• you use file-loader or url-loader and forgot to add type: 'javascript/auto' https://webpack.js.org/guides/asset-modules/ (no top), we strongly recommend migrate to asset modules
• you apply loader some loaders twice (check you test/include/exclude)
• you use custom function for generate data URI and it is buggy
• you use wrong loader for svg, for example @svgr/webpack generate named export, not URL, so if you use this loader for all svg files you will have problems with HTML/CSS/other not js/jsx

Feel free to feedback