How to fix Dash App Exception - Invalid number of output values Expected

Question

I using plotly dash app framework to build an multi-page app. I have callback functions with multiple output values, one callback is for tab_content and other one to update page_content.

Upon deploying the app, it throws an exception when I click Home page and doesn't render the content in callback. Desired behavior is upon clicking Home , the page content refreshes and renders tab content.

app.layout = html.Div([

    # header
    html.Div([ 

              dcc.Link(
                 href=app.get_relative_path('/home'),
                 children='Home'
              ),

              dcc.Link(
                 href=app.get_relative_path('/history'),
                 children='History'
              ),

              # For pdf downloads
              dash_extensions.Download(id="download"),
              dcc.Location(id="url"),

              # Page content
              html.Div(id="page-content"),

              # Tab content
              html.Div(id="tab_content"),

      ])

Callback

Update tab content, if pagename == 'home' then return tab1 layout

@app.callback([
               Output('tab-content', 'children'),
               
              ],
              [ 
               Input('tab', 'value')
               Input('url', 'pagename'),
              ]
             )
def display_content(tab, pagename):

    # Pages and Links

    if tab == 'tab1' or pagename == 'home':
        return tab1.layout

    if tab == 'tab2':
        return tab2.layout()


# Update page content 

@app.callback([
               Output('page-content', 'children'),
               Output('download', 'data')
              ],
              [Input('url', 'pagename')]
             )
def display_content(page_name):

    # Pages and Links

    if not page_name or page_name == 'home':
        return [dash.no_update, dash.no_update]

    if page_name == 'history':
        return [history.layout(), dash.no_update]

    else:
        return ['404 Error', dash.no_update]

I have also tried removing the list and modifying the return statement with no luck:

if not page_name:
   return dash.no_update, dash.no_update

if page_name == 'history':
   return history.layout(), dash.no_update

I see the following traceback in Logs.

Traceback (most recent call last):
File "/app/.heroku/python/lib/python3.6/site-packages/flask/app.py", line 1950, in full_dispatch_request
rv = self.dispatch_request()
File "/app/.heroku/python/lib/python3.6/site-packages/flask/app.py", line 1936, in dispatch_request
return self.view_functions[rule.endpoint](**req.view_args)
File "/app/.heroku/python/lib/python3.6/site-packages/dash/dash.py", line 1050, in dispatch
response.set_data(func(*args, outputs_list=outputs_list))
File "/app/.heroku/python/lib/python3.6/site-packages/dash/dash.py", line 995, in add_context
_validate.validate_multi_return(output_spec, output_value, callback_id)
File "/app/.heroku/python/lib/python3.6/site-packages/dash/_validate.py", line 126, in validate_multi_return
callback_id, len(outputs_list), len(output_value)
172.17.0.19 - - [03/Sep/2020:06:03:32 +0000] "POST /dash-app/_dash-update-component HTTP/1.1" 500 69 "https://example.com/dash-app" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36"

dash.exceptions.InvalidCallbackReturnValue: Invalid number of output values for ..page-content.children...download.data...

Expected the output type to be a list or tuple, but got None

Answer 1

You're missing a quotation to close your string. That should fix it.

    if page_name == 'history': # this closing one here
        return [history.layout(), dash.no_update]

    else:
        return ['404 Error', dash.no_update]