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


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:



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 ?

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.layout = 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'),
        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'),
                    'data': [{
                        'x': [1, 2, 3],
                        'y': [3, 1, 2],
                        'type': 'bar'
                columns=[{'id': c, 'name': c} for c in df.columns]
    elif tab == 'tab-2-example':
        return html.Div([
            html.H3('Tab content 2'),
                    '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)


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

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:

    visibility: hidden;
    content: "Loading...";
    display: inline-block;
    color: magenta;
    visibility: visible;

@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?