dcc.Tabs + dcc.Loading result in ncaught (in promise) TypeError: Cannot read property 'on' of null

Dash Python
1

Hello,

I’m stuck with an error since yesterday, I dont know how to fix it;

I had initially provided my own example, but the same error actually happens with the first example available here: https://dash.plot.ly/dash-core-components/tabs

If I replace this line:

html.Div(id='tabs-content-example')

by

dcc.Loading(id="loading-1000", children=[html.Div(id="tabs-content-example")], type="default")

The console throws:

Uncaught (in promise) TypeError: Cannot read property ‘on’ of null
at PlotlyGraph.bindEvents (Graph.react.js:149)
at Graph.react.js:114

What do I do wrong ?

2

Here is a full example of my issue, if someone copy-past and run it, errors will popup when switching from tab 1 to tab 2 or 3.

Below code is based on the dcc.Tab and dash_table examples in the official doc

Each of these code runs frictionless seperatately.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import dash_table
import copy
import dash_daq as daq
import json
import numpy as np
import pandas as pd
import time


data = dict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
    ]
)

df = pd.DataFrame(data)







app = dash.Dash(__name__)
app.config['suppress_callback_exceptions']=True


server=app.server
app.layout = html.Div([     
    html.Div([
        html.H1('Dash Tabs component demo'),
        dcc.Tabs(id="tabs-example", value='tab-1-example', children=[
            dcc.Tab(label='Tab One', value='tab-1-example'),
            dcc.Tab(label='Tab Two', value='tab-2-example'),
            dcc.Tab(label='Tab Three', value='tab-3-example'),
        ]),
        #html.Div(id='tabs-content-example'),
        dcc.Loading(id="loading-1000", children=[html.Div(id='tabs-content-example')], type="default")
    ]),  
])



@app.callback(Output('tabs-content-example', 'children'),
              [Input('tabs-example', 'value')])
def render_content(tab):
    if tab == 'tab-1-example':
        return html.Div([
            html.H3('Tab content 1'),
            time.sleep(2),
            dcc.Graph(
                id='graph-1-tabs',
                figure={
                    'data': [{
                        'x': [1, 2, 3],
                        'y': [3, 1, 2],
                        'type': 'bar'
                    }]
                }
            ),
            dash_table.DataTable(
                data=df.to_dict('records'),
                columns=[{'id': c, 'name': c} for c in df.columns]
            ),
    ])
       
    elif tab == 'tab-2-example':
        return html.Div([
            html.H3('Tab content 2'),
            dcc.Graph(
                id='graph-2-tabs',
                figure={
                    'data': [{
                        'x': [1, 2, 3],
                        'y': [5, 10, 6],
                        'type': 'bar'
                    }]
                }
            )
        ])
    elif tab == 'tab-3-example':
        return html.Div([
            html.H3('Tab content 3'),
            
        ])


if __name__ == '__main__':
    app.run_server(debug=True, threaded=True, port=8033)

Error:DashErrorUndefined

@chriddyp ,is it a dcc.Loading glitch, or is it because I do not use it correctly?

3

After 3 days trying to use the dcc.Loading, I gave up and opted for the second method described at the bottom of the page https://dash.plot.ly/loading-states, which works just great :heart_eyes::heart_eyes::heart_eyes::star_struck:

I removed my dcc.Loading, and instead added the below css lines in my css file:

*[data-dash-is-loading="true"]{
    visibility: hidden;
}
*[data-dash-is-loading="true"]::before{
    content: "Loading...";
    display: inline-block;
    color: magenta;
    visibility: visible;
}
1 Like
4

@David22 i’ve had the same error. but the css can’t show the gif animation as dcc.Loading does but only a "loading…’ message.
do you know how to achieve what dcc.Loading does?