ArcGIS font's fail to load

I’ve configured my arcgis app to not use the default loaders.

        new ArcGISPlugin({
             useDefaultAssetLoaders: false,
        }),

This is because I’m including some additional libraries like font awesome.

In summary, I’m running into issue with fonts:

Failed to decode downloaded font: <URL> OTS parsing error: invalid version tag

This occurs in production and in webpack-dev server builds.

Same error as mentioned, hopefully we can trouble shoot this here a bit and figure out what the issue is so folks won’t run into this in the future.

The network log shows these fonts being loaded twice, which I find odd:

This issue is discussed here…it mentions a potential cause of using multiple loaders for the same file, which might be the cause here since arcgis plugin is using its own loaders under the hood. Not sure though.

https://github.com/webpack-contrib/file-loader/issues/84#issuecomment-240958596

Steps to Reproduce

1. Download https://github.com/roemhildtg/arcgis-webpack-font-issue
2. npm install && npm start
3. Browse to http://localhost:9000
4. Observe font issues

Context

I was trying to create a webpack app from scratch. The reason being there’s tons of guides out on the web and you really don’t know the best way to do so without doing it by hand once. The esri starter template is nice and is probably packed with tons of features that I don’t even know I need yet, but I can’t understand how to fix issues I encounter without building up an environment from scratch.

Your Environment

• Version used: Latest on github (4.7.10)
• Browser Name and version: Chrome 66
• Operating System and version (desktop or mobile): Windows 7
• Link to your project if available: https://github.com/roemhildtg/arcgis-webpack-font-issue

[odoe]

You need this sass variable if using the JSAPI sass

$include_RasterSymbologyEditor: false !default;

It’s pulling in the dgrid css and I don’t know why the resolve-url-loader can’t pick it up.

[odoe]

This should be fixed in 4.7.11

Could you try that out @roemhildtg?