Cannot load inline font in Electron-Forge/Webpack

Question

When import 'semantic-ui-css/semantic.min.css' into a brand new Electron-Forge/Webpack5 project, I get the following:

UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAO...
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "data:" URIs.

After stepping through the code, it appears that the data:uri format here does not match the regex extracting its format in NormalModule: https://github.com/webpack/webpack/blob/e5570ab5230e98e1030d696e84465b5f533fdae9/lib/schemes/DataUriPlugin.js#L16. Note the double ;; in the data URI, that breaks the RegEx linked.

However, this CSS file loads fine in my website. When stepping through the webpack build, they both load the CSS file (as verified by breakpoints in https://github.com/webpack/webpack/blob/e83587cfef25db91dc5b86be5b729288fd1bafdd/lib/NormalModule.js#L761), but then the website just... doesn't load this data URL??? I tried replacing the webpack config for Electron with the one from the website, but no joy.

I'm all out of ideas after a day or 4 digging into this. I don't even know where to poke next. Any suggestions on where I can dig/what I can check to get this CSS file loading in Electron?

A minimal demo repo can be found here: https://github.com/FrozenKiwi/data-url-loading, only difference is pulled the offending CSS declaration out into the local CSS file

Sanitarium

I answered here about this. I hope it will solve your problem like me. – Penholder

Answer 1

Solution with css-loader version 6.5.0, is to disable url loader for data: urls.

In webpack.config.js, where css-loader is configured, add this option:

    { 
      loader: 'css-loader', 
      options: {
        url: {
          filter: (url, resourcePath) => {
            // resourcePath - path to css file

            // Don't handle `data:` urls
            if (url.startsWith('data:')) {
              return false;
            }

            return true;
          },
        },
      } 
    }

Elevon

I will check this out this weekend! Completely forgot about it, but always good to resolve something that caused so much pain! – Sanitarium

Answer 2

Using Semantic-UI React while running webpack v5 gives below errors:

Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "data:" URIs.
TypeError: Cannot read property 'get' of undefined

Found this issue on github which convinced me to switch to another UI Framework: https://github.com/Semantic-Org/Semantic-UI-React/issues/4287

Cephalometer

Answer 3

Finally fixed it...

Electron-Forge installs a recent version of CSS-Loader, whereas the website still has quite an old version. Downgrading fixed the issue.

Sanitarium