Blank page displayed after importing a dash app into the main file index.py but app displaying just fine if imported on its own

Dash Python
1

Hello,
I am creating a multi-apps dashboard that follows the structure shown in the dash documentation (URL Routing and Multiple Apps | Dash for Python Documentation | Plotly, Structuring a Multi-Page App):

  • app.py
  • index.py
  • apps folder containing:
  • hourly_costs_app.py
  • hourly_costs_app2.py
  • app2.py

The multi-page app works fine when importing/displaying only hourly_costs_app and app2 or hourly_costs_app2 and app2.

However, when importing and trying to display both hourly_costs_app and hourly_costs_app2, the multi-page app shows blank pages for any of the urls (url of hourly_costs, hourly_costs2, and app2).

I don’t even get an error on the python terminal or on the web browser page when I look at the source code.

The project folder and files (app.py, index.py and the apps) can be downloaded here: files_p/dash multi app.zip at 1754ff653107ee63c5ae234cef8bef2414ba6362 · cl-frp/files_p · GitHub
index.py is the code to run to reproduce the issue.

if under index.py I run:
from apps import hourly_costs_app, app2
and:

def display_page(pathname):
    if pathname == '/apps/hourly_costs':
        return hourly_costs_app.layout
    if pathname == '/apps/app2':
        return app2.layout

then the app works fine.

if under index.py I run:

from apps import hourly_costs_app2, app2
and:

def display_page(pathname):
    if pathname == '/apps/hourly_costs2':
        return hourly_costs_app2.layout
    elif pathname == '/apps/app2':
        return app2.layout

Then it works fine.

However when I import hourly_costs_app and hourly_costs_app2 at the same time I get blank pages in my browser, with index.py like:
from apps import hourly_costs_app, hourly_costs_app2, app2
and:

def display_page(pathname):
    if pathname == '/apps/hourly_costs':
        return hourly_costs_app.layout
    elif pathname == '/apps/hourly_costs2':
        return hourly_costs_app2.layout
    elif pathname == '/apps/app2':
        return app2.layout

Any clue as to what is happening or how I could get the error to show?

Thank you.

2

Hi @cl_frp

It’s likely that you have the same ids in the hourly_costs_app.py and hourly_costs2_app.py

The ids must be unique in the entire multi-page app.

3

Thank you very much, indeed my charts ids were the same in both apps which caused the issue.

1 Like