Cesium causing Loading Chunk Failure

Dash Python
1

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).

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)

Any help/advice is appreaciated!

2

Forgot to add package versions:

  • 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

Cesium Version

  • CesiumJS 1.106
3

Hey Paul,

Did you ever resolve this issue? I’m trying to run Cesium in offline mode (using the CesiumJS package not external stylescripts) and I’m getting this error.

If you can run this with internet, you might be better off using external_scripts and external_stylesheets.

4

Kind of. I wasn’t able to resolve this with the Dash Core Components library. I did find a library (Dash Mantine Components) that resolved the issue for dcc.Dropdown; a similar issue existed with dcc.DatePickerSingle which dmc resolved.

I’m now getting an “Maximum call stack size exceeded” error with dash_cytoscape. These errors occur even if I am not creating a Cesium window. Just having the Cesium code in the assets folder creates it.

Unfortunately, I need to have Cesium in an offline mode.

5

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

6

Wow this fixes the issue. I can’t believe you found that. Thank you so much for updating this post!