Cesium causes Loading Chunk Failure in Dash

Hello,

I’ve been trying to use CesiumJS with Dash and followed the advice here. with a modification to run Cesium locally. That worked well until I introduced a call to dcc.Dropdown. I then get “Loading chunk 792 failed” as an error (see below). I’ve posted this on the Dash forums as well.

ChunkLoadError: Loading chunk 792 failed.

(timeout: http://127.0.0.1:8053/_dash-component-suites/dash/dcc/async-dropdown.js)

    at i.f.j (http://127.0.0.1:8053/_dash-component-suites/dash/dcc/dash_core_components.v2_11_0m1689793691.js:2:493077)

    at http://127.0.0.1:8053/_dash-component-suites/dash/dcc/dash_core_components.v2_11_0m1689793691.js:2:490357

    at Array.reduce (<anonymous>)

    at i.e (http://127.0.0.1:8053/_dash-component-suites/dash/dcc/dash_core_components.v2_11_0m1689793691.js:2:490322)

    at s (http://127.0.0.1:8053/_dash-component-suites/dash/dcc/dash_core_components.v2_11_0m1689793691.js:2:36274)

    at initializeLazyComponentType (http://127.0.0.1:8053/_dash-component-suites/dash/deps/react-dom@16.v2_11_1m1689793691.14.0.js:1450:22)

    at readLazyComponentType (http://127.0.0.1:8053/_dash-component-suites/dash/deps/react-dom@16.v2_11_1m1689793691.14.0.js:11997:5)

    at mountLazyComponent (http://127.0.0.1:8053/_dash-component-suites/dash/deps/react-dom@16.v2_11_1m1689793691.14.0.js:17467:21)

    at beginWork (http://127.0.0.1:8053/_dash-component-suites/dash/deps/react-dom@16.v2_11_1m1689793691.14.0.js:18737:18)

    at beginWork$1 (http://127.0.0.1:8053/_dash-component-suites/dash/deps/react-dom@16.v2_11_1m1689793691.14.0.js:23314:16)

Python code:

import dash_bootstrap_components as dbc
import dash_cytoscape as cyto
from dash import Dash, Input, Output, dcc, html

app = Dash(
    __name__,
    title="DASH Test with Cesium",
    suppress_callback_exceptions=True,
)

app.layout = html.Div(
    dbc.Row(
        [
            dbc.Col(html.Div("Hello Cesium")),
            dbc.Col(html.Div(dcc.Dropdown(["NYC", "MTL", "SF"], "NYC", id="demo-dropdown"))),
            dbc.Col(html.Div(id="cesiumContainer")),
        ]
    )
)

app.clientside_callback(
    """
    function(id) {
            window.viewer = new Cesium.Viewer(id,{
                automaticallyTrackDataSourceClocks : false,
                shouldAnimate: true,
                imageryProvider : new Cesium.TileMapServiceImageryProvider({
                    url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'),
                }),
                baseLayerPicker : false,
                geocoder : false

            });

        window.viewer.scene.globe.enableLighting = true;
        return true;
    }
    """,
    Output("cesiumContainer", "data-done"),
    Input("cesiumContainer", "id"),
)

# Run the server.
if __name__ == "__main__":
    app.run_server(debug=True, port=8053, use_reloader=False)

I’m using a stand-alone version of CesiumJS 1.106 and the following python packages.

  • astroid 2.15.6
  • black 23.3.0
  • click 8.1.6
  • colorama 0.4.6
  • dill 0.3.6
  • importlib-metadata 6.7.0
  • isort 5.11.5
  • lazy-object-proxy 1.9.0
  • mccabe 0.7.0
  • mypy-extensions 1.0.0
  • packaging 23.1
  • pathspec 0.11.1
  • pip 20.1.1
  • platformdirs 3.9.1
  • pylint 2.17.4
  • setuptools 47.1.0
  • tomli 2.0.1
  • tomlkit 0.11.8
  • typed-ast 1.5.5
  • typing-extensions 4.7.1
  • wrapt 1.15.0
  • zipp 3.15.0

Any help/advice is appreaciated!

It appears that Cesium defines a function, setTimout , which overrides a similarly named dash function. This can be resolved by renaming setTimeout in cesiumWorkerBootstrapper.js on lines 36, 461, 1201, 1202.