css-loader@6 breaks building icons

[thedocbwarren]

When using webpack 5 and importing via js like so:

import "material-icons";

causes the build to fail to create icons in correct format.

[marella]

Thanks for reporting. It works for me with webpack 5.37.1 and css-loader 6.0.0 when importing via js as import 'material-icons';.

Please try using import 'material-icons/iconfont/material-icons.css'; instead of import 'material-icons'; and let me know if that works.

Please check if you have configured webpack correctly to load css and font files. Example webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

Please provide the following details to help me reproduce the error:

• full error message
• your webpack config webpack.config.js
• exact versions of each package you are using:
  • material-icons
  • css-loader
  • webpack
  • node
  • npm

[thedocbwarren]

Thank you for looking into it! I'm using Node 16.13.0 LTS , npm 8.1.1, webpack 5.60.0, material-icons 1.10.0, css-loader 6.5.0

I'm also running under electron 15.

my webpack config is the following:

const path = require("path");
const webpack = require("webpack");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const WebpackPwaManifest = require("webpack-pwa-manifest");

const devServer = require("./devServer.js");
const middleware = require("./middleware.js");
const Package = require("./package.json");

const NAME = "GCP Data Manager";
const LOGO = "./src/images/logo.png";

const isProd = process.argv[process.argv.indexOf("--mode") + 1] === "production";

console.info(`Mode: ${((isProd) ? "Production" : "Development")}`);

module.exports = {
  entry: ["./src/index.jsx"],
  context: __dirname,
  output: {
    filename: "index.js",
    chunkFilename: "[name].js",
    publicPath: "",
    globalObject: "this",
  },
  resolve: {
    fallback: { "path": require.resolve("path-browserify") }
  },
  target: "electron-renderer",
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 8080,
    before: middleware,
    after: devServer
  },
  module: {
    rules: [
      {
        test: /\.js|\.jsx$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "images/[name].[ext]",
            }
          }
        ]
      },
      {
        test: /\.(eot|svg|ttf|otf|woff|woff2)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "fonts/[name].[ext]",
            }
          }
        ]
      },
      {
        test: /\.(css|scss)$/,
        use: [{
          loader: "style-loader"
        },
        {
          loader: "css-loader", options: {
            sourceMap: true
          }
        },
        {
          loader: "sass-loader", options: {
            sourceMap: true
          }
        }]
      }
    ]
  },
  stats: "errors-only",
  devtool: isProd ? false : "source-map",
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.DefinePlugin({
      VERSION: JSON.stringify(Package.version),
      APP_NAME: JSON.stringify(NAME),
      APP_TITLE: JSON.stringify(NAME),
      DESCRIPTION: JSON.stringify(NAME),
      AUTHOR: JSON.stringify("Semantic Clarity"),
      WEBSITE: JSON.stringify("https://www.semanticclarity.com"),
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
      "process.env.DEBUG": JSON.stringify(process.env.DEBUG),
      IS_PROD: isProd
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      title: NAME
    }),
    new FaviconsWebpackPlugin({
      logo: LOGO,
      prefix: "images/",
      inject: true,
      cache: true,
      favicons: {
      icons: {
            // Platform Options:
            // - offset - offset in percentage
            // - background:
            //   * false - use default
            //   * true - force use default, e.g. set background for Android icons
            //   * color - set background for the specified icons
            //   * mask - apply mask in order to create circle icon (applied by default for firefox). `boolean`
            //   * overlayGlow - apply glow effect after mask has been applied (applied by default for firefox). `boolean`
            //   * overlayShadow - apply drop shadow after mask has been applied .`boolean`
            //
            android: false,              // Create Android homescreen icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
            appleIcon: false,            // Create Apple touch icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
            appleStartup: false,         // Create Apple startup images. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
            coast: false,                // Create Opera Coast icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
            favicons: true,             // Create regular favicons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
            firefox: false,              // Create Firefox OS icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
            windows: false,              // Create Windows 8 tile icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
            yandex: false                // Create Yandex browser icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
        }
      }
    }),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new WebpackPwaManifest({
      name: NAME,
      short_name: NAME,
      description: NAME,
      background_color: "#403014",
      crossorigin: "use-credentials", //can be null, use-credentials or anonymous
      icons: [
        {
          src: path.resolve(LOGO),
          sizes: [96, 128, 192, 256, 384, 512], // multiple sizes
          ios: true
        }
      ]
    })
  ],
  // optimization
  optimization: isProd ? {
    providedExports: true,
    usedExports: true
  } : {}
};

Icons fail to build correctly (no error from webpack) and the error message I get on runtime (browser) is:

index.html:1 Failed to decode downloaded font: file:///Users/doctor/Documents/workspace/gcp-data-manager/dist/fd689a9b06c632755223.woff2
index.html:1 OTS parsing error: invalid sfntVersion: 1702391919
index.html:1 Failed to decode downloaded font: file:///Users/doctor/Documents/workspace/gcp-data-manager/dist/dccb34ec9957161fe047.woff
index.html:1 OTS parsing error: invalid sfntVersion: 1702391919
node:electron/js2c/renderer_init:97 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
    Policy set or a policy with "unsafe-eval" enabled. This exposes users of
    this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
(anonymous) @ node:electron/js2c/renderer_init:97
index.html:1 Failed to decode downloaded font: file:///Users/doctor/Documents/workspace/gcp-data-manager/dist/777b5ef3e567e6a1bb05.woff2
index.html:1 OTS parsing error: invalid sfntVersion: 1702391919
index.html:1 Failed to decode downloaded font: file:///Users/doctor/Documents/workspace/gcp-data-manager/dist/4e1f61ad3ac34c98b41e.woff
index.html:1 OTS parsing error: invalid sfntVersion: 1702391919

[thedocbwarren]

Tried the import of the CSS. It doesn't work, same situation.

[thedocbwarren]

BTW, that import method worked well with css-loader@5

[marella]

Thanks for the info. Looking at your webpack config and error message:

      {
        test: /\.(eot|svg|ttf|otf|woff|woff2)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "fonts/[name].[ext]",
            }
          }
        ]
      },

index.html:1 Failed to decode downloaded font: file:///Users/doctor/Documents/workspace/gcp-data-manager/dist/fd689a9b06c632755223.woff2

It looks like the relative path to fonts isn't correctly configured. webpack file-loader might be putting fonts in a sub folder dist/fonts but the code in index.html is trying to access directly from dist directory.

See webpack-contrib/css-loader#1354 (comment). Others are also facing similar issue when using css-loader@6 with file-loader. So migrating to asset modules might help.

BTW, that import method worked well with css-loader@5

So aren't you getting "OTS parsing error" when using css-loader@5 and icons are rendered correctly?

[thedocbwarren]

Correct It works fine with 5. I’ll check the link. Appreciate the time on this. If I can help let me know, I use this awesome library for my open source framework as a nice dependency and also for my apps. Great work on this, kudos!

[marella]

Thanks. Were you able to resolve it by migrating from file-loader to asset modules? I was able to reproduce the error with css-loader@6 + file-loader and changing file-loader to asset modules fixed it. So this issue is specific to css-loader@6 + file-loader and not related to the material-icons package.

[thedocbwarren]

I'll look into that, thank you for testing this out.

[thedocbwarren]

It works, thank you again!