webpack issue "downloadable font rejected by sanitizer" or "failed to decode downloaded font"

Question

I ran into a well known problem that, however, has no clear solution: the following setup of webpack (encore, within Symfony) produces the error downloadable font: rejected by sanitizer ... in Firefox and failed to decode downloaded font in Edge for some (not all!) @fontawesome fonts and IPM Plex Mono (which I installed via npm)

.addLoader(
    {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
            {
                loader: 'file-loader',
                options: {
                    name: "[name].[ext]",
                    outputPath: "./fonts"
                }
            }
        ]
    })

I already tried everything that I could find on stackoverflow, github, and other sites. Not another loader (url-loader), a modification of the outputPath or setting the publicPath, nor anything else helped. The error remains the same. The imports are all fine since there is no compilation error by webpack. Without this part of the webpack config, everything is fine too. The webserver is submitting the file correctly and accessing the URL for it directly downloads a valid font file. Thus the path and anything else seem to be ok. So...what's wrong here?

The problems occure in Firefox, Chrome and Edge (latest version each).

Any idea how to fix this?

Melina

Answer 1

after playing around a lot with several solutions I have found online, this seems to be the one for me:

.copyFiles({
    from: './assets/images',
    to: 'images/[path][name].[hash].[ext]',
})
.configureFilenames({
    images: 'images/[name].[hash].[ext]',
    fonts: 'fonts/[name].[hash].[ext]',
})

explanation: webpack has to copy the files from the vendor, of course. By doing so, it failed in most cases because of a bug in the hashing (I guess). The URLs inside some vendor files haven't been changed correctly by swapping/adding the hash correctly. That's my guess, at least. I tried [hash:6] and [hash:8] as well as simply ignoring the hash (as given in my question). One of the shortened ones succeeded, the others failed. Other configurations (different loaders or plugins) didn't help at all. I then and just by chance set the complete hash and...bazinga! So, in the end, I don't know the real reason for all that failing but at least I now know how to solve the problem: Simply tell webpack to copy and rename the files by keeping the complete hash and that's it.

Melina