Dash tutorial help: dash layout

Dash Python
1

Hello, I am trying to replicate the tutorial and having some issues.

The tutorial code on the dash homepage is:

# Import packages
from dash import Dash, html, dash_table
import pandas as pd

# Incorporate data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

# Initialize the app
app = Dash()

# App layout
app.layout = [
    html.Div(children='My First App with Data'),
    dash_table.DataTable(data=df.to_dict('records'), page_size=10)
]

# Run the app
if __name__ == '__main__':
    app.run(debug=True)

and when I make a venv, install all the packages and run it, I get an error about the layout. Not much help about it online. Can anyone replicate this? Is it just me?

(.venv) PS C:\pyproj\map> python app.py
Traceback (most recent call last):
  File "C:\pyproj\map\app.py", line 12, in <module>
    app.layout = [
    ^^^^^^^^^^
  File "C:\pyproj\map\.venv\Lib\site-packages\dash\dash.py", line 616, in layout
    _validate.validate_layout_type(value)
  File "C:\pyproj\map\.venv\Lib\site-packages\dash\_validate.py", line 394, in validate_layout_type
    raise exceptions.NoLayoutException(
dash.exceptions.NoLayoutException: Layout must be a dash component or a function that returns a dash component.

Not really sure how to debug as there isn’t much info.
Currently using VS Code.

2

Hi @ocho77

Be sure to use the latest version of dash.

In older versions you had to do it like this:

app.layout = html.Div([ ....])

rather than how it’s shown in the Dash tutorial:

app.layout = [....]