DataTable update fails with app.run(debug=True), toy example provided

Dash Python
,
1

DataTable is throwing errors in the JavaScript code when the Python server is started with debug=True. The following toy program uses two buttons to populate a table with data.

from dash import Dash, Input, Output, html, dcc, callback
from dash.dash_table import DataTable
import plotly.express as px
import numpy as np


def dataframe_to_table(df, columns=None, include_index=True):
    """
    Given a pandas dataframe return data appropriate for
    populating a plotly Table class
    :param df:  input dataframe
    :param columns:  List of columns to include (None --> all columns)
    :param include_index:  Should indices be included in data?  True/False
    :return: numpy data, column names
    """

    if df is None:
        empty_frame = pd.DataFrame(data={'empty table': ['None']})
        return empty_frame.values, [
            {"id": idx, "name": colname}
            for idx, colname in enumerate(empty_frame.columns)]

    if columns is not None:
        df = df[columns]  # project required columns
    else:
        columns = list(df.columns)  # all columns

    # Get required numpy representation of DataTable values
    values = df.to_numpy()

    if include_index:
        indices = df.index.to_numpy()
        if len(df.index.names) == 1 and df.index.names[0] is None:
            # handle unnamed index
            names = ['index']
        else:
            names = list(df.index.names)
        names.extend(columns)
        # Add indices to the table
        data = np.hstack((
            np.reshape(indices, (-1, 1)),
            values))
    else:
        data = values
        names = columns

    nparray = np.array(data)
    coldict = [{"id": str(idx), "name": str(colname)} for idx, colname in
               enumerate(names)]
    return data, coldict


@callback(
    Output('summary_tbl', 'data', allow_duplicate=True),
    Output('summary_tbl', 'columns', allow_duplicate=True),
    Input('iris', 'n_clicks'),
    prevent_initial_call=True
)
def populate_table(n_clicks):
    df = px.data.iris()

    return dataframe_to_table(df)

@callback(
    Output('summary_tbl', 'data'),
    Output('summary_tbl', 'columns'),
    Input('wind', 'n_clicks'),
)
def populate_wind(input):
    df = px.data.wind()
    return dataframe_to_table(df)


def main():
    app = Dash(__name__)

    app.layout = html.Div([
        html.Button('Iris', id='iris'),
        html.Button('Wind', id='wind'),
        DataTable(id="summary_tbl", data=[],
                  editable=True,
                  sort_action='native',
                  filter_action='native',
                  page_current=0,
                  page_size=20,
                  ),
    ])



    app.run(debug=True)

if __name__ == "__main__":
    main()

When invoked with app.run(debug=False), it runs fine. With debug=True. It produces a browser Javascript exception:

exceptions.js:119 Uncaught Error: Invalid argument `data[0]` passed into DataTable with ID "summary_tbl".
Expected an object.
Was supplied type `array`.
    at propTypeErrorHandler (exceptions.js:119:11)
    at CheckedComponent (TreeContainer.js:53:29)
    at renderWithHooks (react-dom@16.v2_12_1m1692454942.14.0.js:14938:20)
    at updateFunctionComponent (react-dom@16.v2_12_1m1692454942.14.0.js:17169:22)
    at beginWork (react-dom@16.v2_12_1m1692454942.14.0.js:18745:18)
    at HTMLUnknownElement.callCallback (react-dom@16.v2_12_1m1692454942.14.0.js:182:16)
    at Object.invokeGuardedCallbackDev (react-dom@16.v2_12_1m1692454942.14.0.js:231:18)
    at invokeGuardedCallback (react-dom@16.v2_12_1m1692454942.14.0.js:286:33)
    at beginWork$1 (react-dom@16.v2_12_1m1692454942.14.0.js:23338:9)
    at performUnitOfWork (react-dom@16.v2_12_1m1692454942.14.0.js:22292:14)

This was observed with Python 3.9.5 running dash 2.12.0 (and I have seen similar behavior in 2.4.1).

Regards,
Marie