ModuleBuildError: Module build failed: UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;

[shibbir]

Bug Report

Webpack module build failed because of the extra semicolon in Line 41024 in node_modules\fomantic-ui-css\semantic.css

Steps to reproduce

1. Upgrade to webpack 5.x.x, mini-css-extract-plugin 2.x.x, and fomantic-ui-css 2.x.x
2. Use webpack 5 asset modules => https://webpack.js.org/guides/asset-modules/
3. My webpack.config =>

plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css"
    })
],

module: {
    rules: [
        {
             test: /\.js?$/,
             exclude: /node_modules/,
             loader: "babel-loader"
        },
        {
             test: /\.css$/i,
             use: [
                 MiniCssExtractPlugin.loader,
                 "css-loader"
             ]
        },
        {
             test: /\.(png|svg|jpg|jpeg|gif)$/i,
             type: "asset/resource"
        },
        {
             test: /\.(woff|woff2|eot|ttf|otf)$/i,
             type: "asset/resource"
        }
    ]
}

Expected result

Webpack compilation without errors.

Actual result

ModuleBuildError: Module build failed: UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;base64

Screenshot (if possible)

Version

fomantic-ui-css v2.8.8
webpack v5.46.0
mini-css-extract-plugin v2.1.0

[lubber-de]

Additional semicolon removed by #2028