How can I resolve the error Dash can not load data in browser (error loading layout)

Dash Python
1

Quite some posts have discussed the matter, but nothing to solve my problem. The problem is the ‘error loading layout’ in the browser when running the multi-page dash app. In the terminal I have no error.

my app is based on the 'towards data science’article: Callbacks, Layouts, & Bootstrap: How to Create Dashboards in Plotly Dash | by Mitchell Krieger | Towards Data Science

I already have re-installed the different modules and have started all over again, all without a satisfying result.

My code is:

app.py

import dash

app = dash.Dash(__name__, suppress_callback_exceptions=True)
server = app.server

index.py

from dash import dcc
from dash import html
from dash import Output, Input

from app import app
from layouts import navbar
from layouts import layout_overview, layout_comparison, layout_analysis

app.config.suppress_callback_exceptions = True

app.layout = html.Div([
            dcc.Location(id='url', refresh=False),
            navbar(),
            html.Div(id='page-content')
])


@app.callback(Output('page-content', 'children'),
            [Input('url', 'pathname')])
def display_page(pathname):
    
    if pathname == '/':
        return layout_overview
    elif pathname == '/overview':
        return layout_overview
    elif pathname == '/comparison':
        return layout_comparison
    elif pathname == '/analysis':
        return layout_analysis
    else:
        return '404'

if __name__ == '__main__':
    app.run_server(port='5000', host='127.0.0.1', debug=True)

layout.py (under construction)

from dash import dcc
from dash import html
import pandas as pd


########################################
# Add Data
########################################

df = pd.read_csv('C:\\Users\\StefanSijbesmaDAAT\\Documents\\Scripting\\Test\\assets\\Life expectancy.csv')
years = df['Year'].unique()
country=df['Entity'].unique()

########################################
# Create Auxiliary Components Here
########################################

def navbar():
    html.Nav([  # navbar on top of the dashboard using html components
        dcc.Link(
            html.H4('Overview'),
            href='/overview',
            style={
                'display': 'inline-block',
                'margin-right': '30px'
                    }
        ),
        dcc.Link(
            html.H4('Comparison'),
            href='/comparison',
            style={
                'display': 'inline-block',
                'margin-right': '30px'
                    }
        ),
        dcc.Link(
            html.H4('Analysis'),
            href='/analysis',
            style={
                'display': 'inline-block',
                'margin-right': '230px'
                    }
        ),
            ], className='navbar'),
    
    return navbar


########################################
# Create Page Layouts Here
########################################

### Layout Overview
layout_overview = html.Div('overview'

)

### Layout Comparison
layout_comparison = html.Div('comparison'

)

### Layout Analysis
layout_analysis = html.Div('analysis'

)

callbacks.py

still empty

Can anyone please point me in the right direction?

Thanks in advance.

2

It looks like you have your layouts commented out but not the callback that includes them. I believe for dash to work properly, all of the elements it’s calling must be present.

What happens if you un-comment all your layouts in layouts.py or comment out the call to them in index.py?

3

In my IDE, Visual studio code, these line are not commented out. This has happened while pasting the code in the post above.

when I run: py index.py
the server runs without an issue. In the browser the text appears: ’ error loading layout’

4

It looks like it’s your call to navbar(). I’m not a python expert but i don’t think you can return the name of the function in the same function as you’ve done.

If you change it to:

def navbar():
    return html.Nav([  # navbar on top of the dashboard using html components
        dcc.Link(
            html.H4('Overview'),
            href='/overview',
            style={
                'display': 'inline-block',
                'margin-right': '30px'
                    }
        ),
        dcc.Link(
            html.H4('Comparison'),
            href='/comparison',
            style={
                'display': 'inline-block',
                'margin-right': '30px'
                    }
        ),
        dcc.Link(
            html.H4('Analysis'),
            href='/analysis',
            style={
                'display': 'inline-block',
                'margin-right': '230px'
                    }
        ),
            ], className='navbar')

It should go back to working.

5

It works. Thanks!

1 Like
6

Perhaps start by seeing if the problem is associated with a minimal version that just sets application to your Dash app.server.

Another suggestion, try app = dash.Dash(name). The name param (which we’re setting to the current module here) will be passed onto the Flask server that is created. Sometimes this doesn’t matter, but sometimes this is important for Flask.

Regards,
Rachel Gomez