ReferenceError in multipage application

While not a real solution to the problem (which i have not yet understood fully; it seems to happen only in some cases), i have come up with a workaround using the new Dash pattern matching callbacks in 📣 Dash v1.11.0 Release - Introducing Pattern-Matching Callbacks. Let’s say that the problematic callback looks like this,

    @app.callback(Output(SITE_HEIGHT_CACHE, 'data'), 
                  [Input(SITE_HEIGHT_SLIDER, 'value')])
    def update_site_height(value):
        return value

with the error related to SITE_HEIGHT_SLIDER, which is a dynamically generated component. The error looks something like,

react_devtools_backend.js:6 ReferenceError: A nonexistent object was used in an Input of a Dash callback.

To silence the error, change the callback to accept willcards; since no-components-present is OK in a wildcard context, the error will disappear. The modified callback would be,

    @app.callback(Output(SITE_HEIGHT_CACHE, 'data'), 
                  [Input({"type": SITE_HEIGHT_SLIDER, "index": ALL}, 'value')])
    def update_site_height(value):
        if not value:
            raise PreventUpdate
        return value[0]
1 Like