How to resolve the error: dash.exceptions.NoLayoutException

Dash Python
1

I was trying to update my dash version because the tabs were rending slow and I thought the version v1.12 had a fix on the tab rendering so I did an upgrade and restarted my vs code and I ran my code that was working before then I got the following error:

dash.exceptions.NoLayoutException
dash.exceptions.NoLayoutException: The layout was `None` at the time that `run_server` was called. 
Make sure to set the `layout` attribute of your application before running the server.

The version I was using before the upgrade → '1.10.0'

The version I wanted to upgrade to → Dash v1.12.0

Then I downgraded back and I got the same error.
Here is my file structure:

- dashapp
  -- apps
     --- app1.py
     --- app2.py
     --- app3.py
     --- app4.py
  -- assets
     --- Logo-Business.png
     --- requirements.txt
     --- styles.css
  -- data
     --- data1.csv
     --- data2.csv
  -- app.py
  -- dataframes.py

Here is my code:

from datetime import datetime
from datetime import date
from datetime import  time

import pandas as pd
import plotly.express as px  # (version 4.7.0)
import plotly.graph_objects as go
import plotly.figure_factory as ff

import dash  # pip install dash==1.10.0
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

from apps import app1, app2, app3, app4
from dataframes import  get_df, month_options

app = dash.Dash(
    __name__,
    meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}],
)

server = app.server
app.config["suppress_callback_exceptions"] = True


def build_banner():
    return html.Div(
        id="banner",
        className="banner",
        children=[
            html.Div(
                id="banner-text",
                children=[
                    html.H5("Some Text 1"),
                    html.H6("Some Text 2"),
                ],
            ),
            html.Div(
                id="banner-logo",
                children=[
                    html.Img(id="logo", src="assets/Logo-Business.png"),
                ],
            ),
        ],
    )


def build_tabs():
    return html.Div(
        id="tabs",
        className="tabs",
        children=[
            dcc.Tabs(
                id="app-tabs",
                value="tab1",
                className="custom-tabs",
                children=[
                    dcc.Tab(
                        app1.layout,
                        id="tab1-id",
                        label="Text 1",
                        value="tab1",
                        className="custom-tab",
                        selected_className="custom-tab--selected",
                    ),
                    dcc.Tab(
                        id="tab2-id",
                        label="Text 2",
                        value="tab2",
                        className="custom-tab",
                        selected_className="custom-tab--selected",
                    ),
                    dcc.Tab(
                        id="tab3-id",
                        label="Text 3",
                        value="tab3",
                        className="custom-tab",
                        selected_className="custom-tab--selected",
                    ),
                    dcc.Tab(
                        id="tab4-id",
                        label="Text 4",
                        value="tab4",
                        className="custom-tab",
                        selected_className="custom-tab--selected",
                    )                                   
                ],
            )
        ],
    )





# ------------------------------------------------------------------------------
# App layout
app.layout = html.Div(
    id="big-app-container",
    children=[
        build_banner(),
        html.Div(
            id="app-container",
            children=[
                build_tabs(),
            ],
        ),
    ],
)


# Connect the Plotly graphs with Dash Components
@app.callback(
    Output("funnel_graph", "figure"),
    [Input("year", "value"),
     Input("month", "value")],
)
def render_tab_content(selected_year, selected_month):
    
    df_copy = get_df().copy()
    df_copy["year"] = df_copy.date.dt.year
    df_copy["month"] = df_copy.date.dt.month
    df_copy = df_copy[(df_copy["month"] == selected_month) & (df_copy["year"] == selected_year)]

    df_select = df_copy.col.value_counts().reset_index()
    
    df_select = df_select.rename(
        columns={
            "index": "New Text 1",
            "app_category": "New Text 2"
        }
    )


    fig = px.funnel_area(App_df,
                         names="New Text 1",
                         values= "New Text 2",
                         template='plotly_dark',
                         height=450)
        
    return fig

# ------------------------------------------------------------------------------
if __name__ == '__main__':
    app.run_server(debug=True, use_reloader=False)