python - getting 'Error loading layout' message on the web browser when running dash layout

Question

I am new at Dash and I am trying to run a simple code where I have just programmed the layout of the app I want to create. Here is my code:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([

    html.H1('Web Application Dashboards widh Dash', style = {'text-align', 'center'}),

    dcc.Dropdown(id='slct_year',
    options=[
        {'label': '2015', 'value': 2015},
        {'label': '2016', 'value': 2016},
        {'label': '2017', 'value': 2017},
        {'label': '2018', 'value': 2018}],

        multi=False,
        value=2015,
        style={'width':'40%'}
        ),

    html.Div(id='output-container', children=[]),
    html.Br(),

    dcc.Graph(id='my_bee_map', figure={})

])

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

However, once I tried to run this I get the message Error loading layout on my web browser. I would like to understand why this is happening and how to correct the problem.

I have already tried to create a new virtual environment a install all the dependencies.

The output on my terminal is:

Dash is running on http://127.0.0.1:8050/

 * Serving Flask app "main" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on

Thanks in advance.

Answer 1

I found the problem. On my first H1 html tag, on the style element, I should have typed a : instead of a ,. Now the code is running smoothly. Thus, the correct code is:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([

    html.H1('Web Application Dashboards widh Dash', style = {'text-align': 'center'}),

    dcc.Dropdown(id='slct_year',
    options=[
        {'label': '2015', 'value': 2015},
        {'label': '2016', 'value': 2016},
        {'label': '2017', 'value': 2017},
        {'label': '2018', 'value': 2018}],

        multi=False,
        value=2015,
        style={'width':'40%'}
        ),

    html.Div(id='output-container', children=[]),
    html.Br(),

    dcc.Graph(id='my_bee_map', figure={})

])

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