"Error loading layout" if there is only one dcc.Tab within dcc.Tabs

[robfraz]

Hi All,

I've been trying out the very recently merged Tabs functionality from pull #213 - thanks for the great new feature! I've been really enjoying the library as a whole (and making very heavy use of it).

Obviously this is a fairly unimportant issue, as why would you ever have just a single tab. However, I thought I'd report it anyway, as my development approach for the project I was applying the tabs feature to was to add in the tabs one by one, and I hit this error straightaway.

Essentially, if you only have a single tab, then you get an 'error loading layout' reported in your browser, and no errors in the logs at all. In Chrome's console, you get this error:

bundle.js?v=0.13.0:2 TypeError: Cannot read property 'props' of undefined
    at t.value (bundle.js?v=0.26.0:27)
    at p._renderValidatedComponentWithoutOwnerOrContext ([email protected]?v=0.13.0:13)
    at p._renderValidatedComponent ([email protected]?v=0.13.0:13)
    at performInitialMount ([email protected]?v=0.13.0:13)
    at p.mountComponent ([email protected]?v=0.13.0:13)
    at Object.mountComponent ([email protected]?v=0.13.0:14)
    at performInitialMount ([email protected]?v=0.13.0:13)
    at p.mountComponent ([email protected]?v=0.13.0:13)
    at Object.mountComponent ([email protected]?v=0.13.0:14)
    at performInitialMount ([email protected]?v=0.13.0:13)

I'm using Python 3.7.0 and my Dash setup is as follows:

dash                   0.21.1   
dash-core-components   0.26.0   
dash-html-components   0.11.0   
dash-renderer          0.13.0   

And a reproducer of the issue is:

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

app.css.config.serve_locally = True
app.scripts.config.serve_locally = True


app.layout = html.Div([
    html.H1('Dash Tabs component demo', style={
            'textAlign': 'center', 'margin': '48px 0', 'fontFamily': 'system-ui'}),
    dcc.Tabs(id="tabs", children=[
        dcc.Tab(label='Tab one', children=[
            html.Div([
                html.H1("This is the content in tab 1"),
            ])
        ]),
        # dcc.Tab(label='Tab two', children=[
        #     html.Div([
        #         html.H1("This is the content in tab 2"),
        #     ])
        # ])
    ],
        style={
        'fontFamily': 'system-ui'
    },
        content_style={
        'borderLeft': '1px solid #d6d6d6',
        'borderRight': '1px solid #d6d6d6',
        'borderBottom': '1px solid #d6d6d6',
        'padding': '44px'
    },
        parent_style={
        'maxWidth': '1000px',
        'margin': '0 auto'
    }
    )
])


if __name__ == '__main__':
    app.run_server(debug=True)

If you put the commented code back in (i.e. two tabs), then everything is fine. Curiously, you can also fix the issue by making sure the single Tab has the value argument defined like so:

        dcc.Tab(label='Tab one', value='tab-1', children=[
            html.Div([
                html.H1("This is the content in tab 1"),
            ])
        ]),

Cheers,
Rob

[rmarren1]

This appears to have been fixed in the Tabs update: https://github.com/plotly/dash-core-components/blob/master/CHANGELOG.md#0272

Closing, let us know if this issue still persists for you after updating to 0.27.2