dash exceptions InvalidCallbackReturnValue

Question

I know this question might be asked, but I couldn't find a solution that fits my problem. I'm trying to build a multi layout dash app.

I would like to to change the layout (which contains dcc.Graphs and dbc.Card) everytime I click on a different Tab ( I have 3 of those). The problem is that I have this exception when I run my code: "dash.exceptions.InvalidCallbackReturnValue: The callback for <Output content.children> returned a value having type Dash which is not JSON serializable. "

Below is my code:

import dash_bootstrap_components as dbc
import base64
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
from DashFriends import friends_layout
from DashUser import user_layout
from FriendsUserApp import userfriends_layout


app = dash.Dash(__name__, suppress_callback_exceptions=True, external_stylesheets=[dbc.themes.MINTY],
                meta_tags=[{'name': 'viewport',
                            'content': 'width=device-width, initial-scale=1.0'}]
                )
colors = {
    'background': '#ffffff',
    'text': '#4d94ff',
    'plot': '#D1D0CE',
    'textfig': '#000000'
}

app_tabs = html.Div(
    [
        dbc.Tabs(
            [
                dbc.Tab(label="My friends", tab_id="tab-friends", labelClassName="text-success font-weight-bold",
                        activeLabelClassName="text-danger"),
                dbc.Tab(label="Just me", tab_id="tab-user", labelClassName="text-success font-weight-bold",
                        activeLabelClassName="text-danger"),
                dbc.Tab(label="My Friends and I", tab_id="tab-userfriends",
                        labelClassName="text-success font-weight-bold",
                        activeLabelClassName="text-danger")
            ],
            id="tabs",
            active_tab="tab-user",
        ),
    ], className="mt-3"
)

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.H1(
        children='Twitter User Analysis',
        style={
            'textAlign': 'center',
            'font-family': 'Garamond',
            'font-weight': 'bold',
            'color': colors['text']
        }
    ),
    html.Div(children='Get an analysis of a user', style={
        'textAlign': 'center',
        'font-family': 'Garamond',
        'font-weight': 'bold',
        'color': colors['text']
    }),
    html.Br(),
    html.Hr(),
    dbc.Row(dbc.Col(app_tabs, width=12), className="mb-3"),
    html.Br(),
    html.Div(id='content', children=[])
])



@app.callback(
    Output(component_id="content", component_property="children"),
    [Input(component_id="tabs", component_property="active_tab")]
)

def switch_tab(tab_chosen):
    if tab_chosen == "tab-friends":
        return friends_layout
    elif tab_chosen == "tab-user":
        return user_layout
    elif tab_chosen == "tab-userfriends":
        return userfriends_layout
    return html.P("This shouldn't be displayed for now...")


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

Answer 1

The problem is in code you haven't shared, but based on the error

dash.exceptions.InvalidCallbackReturnValue: The callback for <Output content.children> returned a value having type Dash which is not JSON serializable.

one of the layouts you return in your switch_tab callback returns an instance of a Dash app.

You can't do this:

In general, Dash properties can only be dash components, strings, dictionaries, numbers, None, or lists of those.