Fonts - dash.exceptions.DependencyException: app is registered but the path requested is not valid.

[gofford]

I'm using this template to bridge https://primereact.org/multiselect/ into Dash but I'm running into issues with Icons not showing:

There's a reproducible example here: https://github.com/gofford/dash-primereact-app.

What I've found so far: the JS Console yields a series of 500 errors for the resource files corresponding to the icons (see [1]), but the files do appear to be available [2]. If I navigate directly to the expected path of the resource (from the stylesheet [3]), I get a DependencyException [4].

I have built this same component in JS using the "normal" cookiecutter template and the icons appear OK, but I need to use TS so that this component can co-exist with other components that have been built from scratch in TS.

Do you know how to remedy this, or if theres anything that I need to do differently during the build or in the webpack?

Figures

[1] 500 Error codes

[2] Files appear to exist

[3] Stylesheet URLs

[4] DependencyException

``` DependencyException dash.exceptions.DependencyException: "dash_primereact_app" is registered but the path requested is not valid. The path requested: "d44157bdfa026dc877af.eot" List of registered paths: defaultdict(, {'dash': {'dcc/dash_core_components-shared.js', 'html/dash_html_components.min.js', 'dcc/async-slider.js', 'html/dash_html_components.min.js.map', 'dcc/async-markdown.js', 'dcc/async-highlight.js', 'dcc/async-datepicker.js', 'dcc/dash_core_components-shared.js.map', 'dcc/async-mathjax.js', 'dcc/async-dropdown.js', 'dcc/async-mathjax.js.map', 'dash_table/async-highlight.js.map', 'dash_table/async-export.js.map', 'dcc/async-highlight.js.map', 'dash-renderer/build/dash_renderer.dev.js.map', 'dcc/async-dropdown.js.map', 'dash_table/bundle.js', 'dash_table/bundle.js.map', 'dcc/async-upload.js.map', 'dcc/async-datepicker.js.map', 'dash_table/async-highlight.js', 'dcc/dash_core_components.js.map', 'dcc/async-plotlyjs.js', 'deps/react@16.14.0.js', 'dcc/plotly.min.js', 'deps/react-dom@16.14.0.js', 'dcc/async-graph.js', 'deps/prop-types@15.8.1.js', 'dash_table/async-table.js.map', 'dash_table/async-table.js', 'dcc/async-plotlyjs.js.map', 'dcc/async-graph.js.map', 'dcc/async-slider.js.map', 'dcc/async-upload.js', 'dcc/async-markdown.js.map', 'deps/polyfill@7.12.1.min.js', 'dash-renderer/build/dash_renderer.dev.js', 'dcc/dash_core_components.js', 'dash_table/async-export.js'}, 'dash_primereact_app': {'dash_primereact_app.js.map', 'dash_primereact_app.js'}}) ```

[T4rk1n]

The extra font files need to be added to the resources dist of the component library, either _js_dist or _css_dist in __init__.py should work and set dynamic=True. If the config works in the regular boilerplate I think you can also copy the init from that.

In the stylesheet url it start with http://127.0.0.1:8050 this won't work for deployed app, I think you can remove that part and it should resolve once the files are added to the dist.

[T4rk1n]

Also for packaging (whl, pypi), need to add the extensions to MANIFEST.in

[gofford]

Thanks for the response!

So, I've tried using __init__.py from the regular (working) boilerplate and there's no change, unfortunately. Still no icons, and 500 errors. Do the font files need to be added to the resource dist manually, or is it expected to be automatic?

In terms of the stylesheet URL how would you suggest I go about changing that? I'm not explicitly setting anything on the URLs here and what I posted above is just the automatic config using this boilerplate.

[T4rk1n]

Do the font files need to be added to the resource dist manually, or is it expected to be automatic?

Files needs to be added manually, the boilerplate only generates with the basic .js bundles.

In terms of the stylesheet URL how would you suggest I go about changing that?

In the stylesheet src file, the font url( remove the local address.