MiniCssExtractPlugin replace issue

[kartpick]

I just tried to use your plugin and got this error at extract-svg-sprite-webpack-plugin/lib/utils/replacer.js:90:41:
TypeError: module.content.replace is not a function

node: v14.8.0/v12.20.1 (on different servers)

I checked at debug that module is instance of CssModule, and content is Uint8Array, and it doesnt have replace method.

My config rules:

rules: [
            {
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: '$'
                }]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: { loader: 'babel-loader' }
            },
            {
                test: /\.(sc|c)ss$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    {
                        loader: 'css-loader',
                        options: { sourceMap: true }
                    },

                    {
                        loader: SpritePlugin.cssLoader
                    },
                    {
                        loader:'sass-loader',
                        options: {
                            implementation: require('sass'),
                            sassOptions: { outputStyle: 'expanded' },
                            sourceMap: true
                        }
                    },
                ]
            },
            {
                test: /\.svg$/,
                use: [
                    SpritePlugin.loader
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'file-loader',
                options: { name: 'img/[name].[ext]', context: '' }
            },
            {
                test: /\.(eot|ttf|woff|woff2)$/,
                loader: 'file-loader?name=fonts/[name].[ext]'
            }
        ]

plugins:

let plugins = [
        new webpack.DefinePlugin({ 'process.env': { NODE_ENV: devMode ? '"development"' : '"production"' } } ),
        new CleanWebpackPlugin(
            ['public/*.js', 'public/*.css', 'public/*.map', 'public/*.json', 'public/*.LICENSE'],
            {
                root: path.resolve(__dirname, '../'),
                exclude: [''],
                verbose: true,
            }),
        new MiniCssExtractPlugin({ filename: devMode ? 'app.css' : 'app.[contenthash:4].css' }),
        new PostCssPipelineWebpackPlugin({
            suffix: 'critical',
            processor: postcss( [ criticalSplit( { output: criticalSplit.output_types.CRITICAL_CSS } ) ] )
        }),
        new PostCssPipelineWebpackPlugin({
            predicate: css => !css.match(/critical./i),
            suffix: 'rest',
            processor: postcss( [ criticalSplit( { output: criticalSplit.output_types.REST_CSS, preserve: false, minify:false } ) ] )
        }),
        new PostCssPipelineWebpackPlugin({
            predicate: css => !css.match(/app.css/),
            suffix: 'min',
            processor: postcss( [ cssnano( { preset: [ 'default', { 'discardComments': { 'removeAll': true } } ] } ) ] ),
            map: devMode ? { inline: true } : false
        }),
        new ImageminPlugin({
            test: /\.(png|gif|svg)$/i,
            pngquant: { quality: 90 },
            cacheFolder: imageMinCacheFolder,
        }),
        new ImageminPlugin({
            test: jpegRegex,
            maxFileSize: bigJpegSize,
            plugins: [ imageminMozjpeg({ quality: 90, progressive: true } ) ],
            cacheFolder: imageMinCacheFolder,
            disable: devMode,
        }),
        new ImageminPlugin({
            test: jpegRegex,
            minFileSize: bigJpegSize,
            plugins: [ imageminMozjpeg({ quality: 60, progressive: true } ) ],
            cacheFolder: imageMinCacheFolder,
            disable: devMode,
        }),
        new CopyPlugin({
            patterns: [
                { from: path.resolve(__dirname, 'img'), to: 'img' },
                { from: path.resolve(__dirname, 'press_img'), to: 'img/press-pics' },
                { from: path.resolve(__dirname, 'fonts') + '/*.ttf', to: 'fonts' }
            ]
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery'
        }),
        new WebpackManifestPlugin({ removeKeyHash: /([a-f0-9]{4}\.?)/gi } ),
        new WorkboxPlugin.GenerateSW({
            // these options encourage the ServiceWorkers to get in there fast
            // and not allow any straggling "old" SWs to hang around
            clientsClaim: true,
            skipWaiting: true,
            // Do not precache images and fonts
            exclude: [/\.(?:png|jpg|jpeg|svg|ttf|LICENSE|.{4}\.(?:css|js))$/],
            // Define runtime caching rules.
            runtimeCaching: [{
                // Match any request that ends with .png, .jpg, .jpeg or .svg.
                urlPattern: /\.(?:png|jpg|jpeg|svg)$/,

                // Apply a cache-first strategy.
                handler: 'CacheFirst',

                options: {
                    // Use a custom cache name.
                    cacheName: 'images',

                    // Only cache 10 images.
                    expiration: {
                        maxEntries: 10,
                    },
                },
            }],
        }),
        new SpritePlugin()
    ]

and webpack config:

{
        entry: {
            polyfills: path.resolve(__dirname, 'js', 'polyfills.js'),
            manual: path.resolve(__dirname, 'js', 'manual.js'),
            profile: path.resolve(__dirname, 'js', 'profile.js'),
            download: path.resolve(__dirname, 'js', 'download.js'),
            index: path.resolve(__dirname, 'js', 'index.js'),
            app: path.resolve(__dirname, 'main.js')
        },
        devtool: false,
        context: path.resolve(__dirname),
        module: rules,
        plugins: plugins,
        output: {
            path: path.resolve(__dirname, '../public'),
            filename: !devMode ? '[name].[hash:4].min.js' : '[name].[hash:4].js',
            chunkFilename: !devMode ? 'chunk.[name].[chunkhash:4].min.js' : 'chunk.[name].[chunkhash:4].js',
            publicPath: publicPath
        },
        resolve: { extensions: ['*', '.js', '.json', '.scss', '.css'] },
        optimization: {
            usedExports: true,
            concatenateModules: true,
            splitChunks: {
                chunks: 'all',
                automaticNameDelimiter: '-',
                cacheGroups: {
                    commons: {
                        //test: /[\\/]node_modules[\\/]/,
                        name: 'commons',
                        chunks: 'initial',
                        minChunks: 2,
                        reuseExistingChunk: true,
                        enforce: true
                    }
                }
            },
            minimizer: [
                new TerserPlugin({
                    cache: true,
                    parallel: true,
                    sourceMap: devMode,
                    terserOptions: {
                        warnings: devMode ? 'verbose' : false,
                        compress: { drop_console: !devMode }
                    },
                    extractComments: true
                }),
            ]
        }
    }

[usman-subhani]

facing the same issue. Reason is this change in the mini css extract plugin
webpack-contrib/mini-css-extract-plugin@220f828

The fix is simple just need to convert buffer to string

// extract-svg-sprite-webpack-plugin/lib/utils/replacer.js:90
module.content = Buffer.from(module.content.toString().replace(regExp, replaceTo));

For now i just downgraded mini css extract plugin to 1.2.1