Error message needed if ids are not unique in multi-page apps
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 24.4k
- Forks
- 2.3k
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 13
Description
Currently if id's in multi-page apps are not unique, and they are used as an input in a callback, the callback fails silently.
In the MWE below, it's obvious what the problem is, but in a large app, this can be difficult to debug without an error message. Only the last instance of the component with the duplicate id will trigger the callback. If you intended the callback to control the first input - everything about the callback appears to be correct. When it doesn't fire, you just need to know to look for a duplicate id somewhere in the app.
@alexcjohnson suggested the error could be caught here: https://github.com/plotly/dash/blob/dev/dash/dash-renderer/src/actions/paths.js#L23

- app.py
- pages
|-- page1.py
|-- page2.py
page1.py
from dash import html, dcc
layout = html.Div(
[
dcc.Link('Go to App 2', href='/pages/page2'),
html.Div("Hello Multi-page app")
]
)
page2.py
from dash import Dash, dcc, html, Output, Input, callback
layout = html.Div([
dcc.Link('Go to App 1', href='/pages/page1'),
dcc.Input(id='input1'),
dcc.Input(id='input1'),
html.Div(id='output2')
])
@callback(Output('output2', 'children'), Input('input1', 'value'))
def update(value):
return f'you have entered {value}'
app.py
from dash import Dash, dcc, html, Input, Output, callback
from pages import page1, page2
app = Dash(__name__, suppress_callback_exceptions=True)
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content')
])
@app.callback(Output('page-content', 'children'),
Input('url', 'pathname'))
def display_page(pathname):
if pathname == '/pages/page1':
return page1.layout
elif pathname == '/pages/page2':
return page2.layout
elif pathname == '/':
return page1.layout
else:
"404"
if __name__ == '__main__':
app.run_server(debug=True)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the duplicate-id callback behavior described in the MWE and inspect dash-renderer/src/actions/paths.js at the linked location. Reproduce the multi-page example, then determine how the renderer should report duplicate IDs; done means the silent failure produces a useful error message for the affected callback.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, python
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100