[BUG] callback error when accessing layout kwargs, in multipage dash app

[odoublewen]

Context

• result of pip list | grep dash

dash                      3.1.1
dash-bootstrap-components 2.0.3

• OS: macOS 15.5
• Browser: both chrome and safari

Describe the bug

To reproduce this bug, I create a multipage site exactly like the one shown in the docs, under the heading "Example: Simple Multi-Page App with Pages". In the pages/analytics.py page, I then added a path_template argument, and changed the layout to use the functional form:

dash.register_page(__name__, path_template="/analytics/<report_id>")

def layout(**kwargs):
    report_id = kwargs["report_id"]
    return html.Div([
        html.H1(f'This is our Analytics page for report {report_id}'),
        html.Div([
            "Select a city: ",
            dcc.RadioItems(
                options=['New York City', 'Montreal', 'San Francisco'],
                value='Montreal',
                id='analytics-input'
            )
        ]),
        html.Br(),
        html.Div(id='analytics-output'),
    ])

But making these small changes results in the following callback error, when running the site in debug mode (see screenshot below):

ID not found in layout

Attempting to connect a callback Input item to component: "analytics-input" but no components with that id exist in the layout. If you are assigning callbacks to components that are generated by other callbacks (and therefore not in the initial layout), you can suppress this exception by setting suppress_callback_exceptions=True. This ID was used in the callback(s) for Output(s): analytics-output.children

Weirdly, the callback error goes away if I change:
report_id = kwargs["report_id"]
to:
report_id = kwargs.get("report_id")

Also, I note that the error message still exists even if I don't do the f-string to format the report_id into the heading (i.e. if the third line of the layout function is just html.H1('This is our Analytics page'),).

Finally, I note that the page still works fine, even with the error message -- but the error message is bothersome and suggests a bug in dash.

Expected behavior

I expect to be able to access kwargs inside of the pages layout function, without creating these callback errors.

Screenshots

Attachment

(I am attaching this zip file, with the 4 simple files:
multi-page-dash-app.zip)

[AnnMarieW]

Hi @odoublewen

Thanks for the good write-up for the issue and including a reproducible example.

When the app starts, the kwargs in the layout function is {}. This is generating the KeyError when you try to access the report_id like this:

report_id = kwargs["report_id"]

The key error is preventing the components in that layout function to be included in the initial layout validation. This is the source of the other errors you see.

Your fix is correct - using the .get() handles the missing key. Another way to handle this is shown in the variable path example in the docs https://dash.plotly.com/urls#variable-paths. The report_id is given a default value:

def layout(report_id=None, **kwargs):
    return html.Div(
        f"The user requested report ID: {report_id}."
    )

Another solution is to include suppress_callback_exceptions=True. This prevents the initial layout validation so those error messages will not show.

app = Dash(use_pages=True,  suppress_callback_exceptions=True)

I wouldn't consider this a bug.

[odoublewen]

Hi @AnnMarieW Thank you for the explanation!! Makes perfect sense, and I totally agree, this is not a bug. I suppose I ought to have been able to deduce this explanation, but I was hung up on the displayed error ("ID not found in layout"). I guess this is because the initial call to layout errors out, so there is no layout, so it triggers the debug message... and then the subsequent call makes the page work as expected.

The documented approach is the best approach. Thanks again!!!