✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

An invalid input object was used in an `Input` of a Dash callback

In developer tools I get this strange error:

dash_renderer.v1_2_2…646652.dev.js:30766 Uncaught (in promise) ReferenceError: An invalid input object was used in an Input of a Dash callback. The id of this object is upload-data and the property is contents. The list of ids in the current layout is [tabs-main, tabs-content, toast-div, session-id, nocid-modal, nocidchecklist, nocid-modal-close-button, error-modal, error-message, error-message-close-button]

Layout:

UPLOAD_BUTTON = html.Div([
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
            'lineHeight': '80px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '6px',
            'textAlign': 'center',
            'margin': '10px'
        },
        multiple=False,
    ),
    html.Div(id='output-data-upload'),
])
 
# UPLOAD_BUTTON is used in following tab layout
tab_files_layout = html.Div([
    html.Div([
        dcc.Input(id='tab-files-identification', value='tab-files', readOnly=True, style={'display': 'none'}),
        html.Div([
            html.P(
                'Upload your files here.'),
            dcc.Loading(html.Div('', id='upload-wait-div', style={'display': 'none'})),
        ], style={'marginLeft': '30%', 'marginRight': '30%', 'textAlign': 'center', 'height': '50px',
                  'marginTop': '2%'}),
    ]),
    html.Div([
        html.Div([
            dash_table.DataTable(id='files-table', columns=[{'name': 'Your Files', 'id': 'filename'}],
                                 data=[
                                     # {'filename': 'example.pdf'},
                                 ],
                                 row_deletable=True,
                                 style_as_list_view=True,
                                 style_data_conditional=[
                                     {
                                         'if': {'row_index': 'odd'},
                                         'backgroundColor': 'rgb(248, 248, 248)'
                                     }],
                                 style_cell={'textAlign': 'left',
                                             'fontFamily': 'Open Sans, HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif',
                                             'overflow': 'hidden',
                                             'textOverflow': 'ellipsis',
                                             'maxWidth': 0},
                                 style_header={'textAlign': 'center', 'fontSize': '1.5rem'},
                                 style_table={'maxHeight': '405px', 'overflowY': 'scroll'}
                                 )
        ], style={'height': '415px'}),
        html.Div([
            UPLOAD_BUTTON,
        ], style={'float': 'center', 'bottom': '30%', 'left': '40%', 'right': '40%'}),
    ], style={'margin': '5% 30% 20% 30%'}),
    html.Div([
        html.Div([
            html.H6('Error', id='upload-error-message'),
            html.Button('Close', id='upload-error-close-button')
        ], style={'textAlign': 'center'}, className='modal-content'),
    ], id='upload-error-modal', className='modal', style={'display': 'none'})
])

The callback:

@app.callback(
    [
        Output(component_id='upload-error-modal', component_property='style'),
        Output(component_id='upload-error-message', component_property='children'),
        Output(component_id='files-table', component_property='data'),
        Output(component_id='toast-div', component_property='children'),
        Output(component_id='upload-wait-div', component_property='children')
    ],
    [
        Input('session-id', 'children'),
        Input('upload-data', 'contents'),
        Input('upload-error-close-button', 'n_clicks'),
        Input('files-table', 'data_previous'),
        Input('tab-files-identification', 'value')
    ],
    [
        State('files-table', 'data'),
        State('upload-data', 'filename'),
    ]
)
def update_files_table(session_id, upload_data, error_close_button_nclicks,
                       data_previous, _, data, filename):
    if ack_upl_files_error(session_id, error_close_button_nclicks):
        return {'display': 'none'}, '', data, '', filename
[...]

Now the strange thing is that everything on the page works correctly, i.e. uploads work, I’m getting contents of upload-data all right, etc.

Can this thing cause problems somewhere? Is there something I can do to fix that?

Full error:

dash_renderer.v1_2_2…646652.dev.js:30766 Uncaught (in promise) ReferenceError: An invalid input object was used in an `Input` of a Dash callback. The id of this object is `upload-data` and the property is `contents`. The list of ids in the current layout is `[tabs-main, tabs-content, toast-div, session-id, nocid-modal, nocidchecklist, nocid-modal-close-button, error-modal, error-message, error-message-close-button]`
    at dash_renderer.v1_2_2…646652.dev.js:30766
    at Array.map (<anonymous>)
    at updateOutput (dash_renderer.v1_2_2…646652.dev.js:30763)
    at _callee$ (dash_renderer.v1_2_2…646652.dev.js:30679)
    at tryCatch (polyfill@7.v1_2_2m15…646652.7.0.min.js:1)
    at Generator.invoke [as _invoke] (polyfill@7.v1_2_2m15…646652.7.0.min.js:1)
    at Generator.t.<computed> [as next] (polyfill@7.v1_2_2m15…646652.7.0.min.js:1)
    at tryCatch (polyfill@7.v1_2_2m15…646652.7.0.min.js:1)
    at invoke (polyfill@7.v1_2_2m15…646652.7.0.min.js:1)
    at polyfill@7.v1_2_2m15…646652.7.0.min.js:1
(anonymous)	@	dash_renderer.v1_2_2…646652.dev.js:30766
updateOutput	@	dash_renderer.v1_2_2…646652.dev.js:30763
_callee$	@	dash_renderer.v1_2_2…646652.dev.js:30679
tryCatch	@	polyfill@7.v1_2_2m15…646652.7.0.min.js:1
invoke	@	polyfill@7.v1_2_2m15…646652.7.0.min.js:1
t.<computed>	@	polyfill@7.v1_2_2m15…646652.7.0.min.js:1
tryCatch	@	polyfill@7.v1_2_2m15…646652.7.0.min.js:1
invoke	@	polyfill@7.v1_2_2m15…646652.7.0.min.js:1
(anonymous)	@	polyfill@7.v1_2_2m15…646652.7.0.min.js:1
Promise.then (async)		
o.async	@	polyfill@7.v1_2_2m15…646652.7.0.min.js:1
_callee	@	dash_renderer.v1_2_2…646652.dev.js:30500
(anonymous)	@	dash_renderer.v1_2_2…646652.dev.js:27581
dispatch	@	dash_renderer.v1_2_2…646652.dev.js:27642
(anonymous)	@	dash_renderer.v1_2_2…646652.dev.js:30404
triggerDefaultState	@	dash_renderer.v1_2_2…646652.dev.js:30395
(anonymous)	@	dash_renderer.v1_2_2…646652.dev.js:30343
(anonymous)	@	dash_renderer.v1_2_2…646652.dev.js:27581
initialization	@	dash_renderer.v1_2_2…646652.dev.js:29514
componentWillReceiveProps	@	dash_renderer.v1_2_2…646652.dev.js:29474
callComponentWillReceiveProps	@	react-dom@16.v1_2_2m…646652.8.6.js:11576
updateClassInstance	@	react-dom@16.v1_2_2m…646652.8.6.js:11786
updateClassComponent	@	react-dom@16.v1_2_2m…646652.8.6.js:14829
beginWork	@	react-dom@16.v1_2_2m…646652.8.6.js:15779
performUnitOfWork	@	react-dom@16.v1_2_2m…646652.8.6.js:19447
workLoop	@	react-dom@16.v1_2_2m…646652.8.6.js:19487
renderRoot	@	react-dom@16.v1_2_2m…646652.8.6.js:19570
performWorkOnRoot	@	react-dom@16.v1_2_2m…646652.8.6.js:20477
performWork	@	react-dom@16.v1_2_2m…646652.8.6.js:20389
performSyncWork	@	react-dom@16.v1_2_2m…646652.8.6.js:20363
requestWork	@	react-dom@16.v1_2_2m…646652.8.6.js:20232
scheduleWork	@	react-dom@16.v1_2_2m…646652.8.6.js:20046
enqueueSetState	@	react-dom@16.v1_2_2m…646652.8.6.js:11304
Component.setState	@	react@16.v1_2_2m1584646652.8.6.js:423
handleChange	@	dash_renderer.v1_2_2…646652.dev.js:27095
dispatch	@	dash_renderer.v1_2_2…646652.dev.js:28095
(anonymous)	@	dash_renderer.v1_2_2…646652.dev.js:27584
dispatch	@	dash_renderer.v1_2_2…646652.dev.js:27642
(anonymous)	@	dash_renderer.v1_2_2…646652.dev.js:30206
Promise.then (async)		
(anonymous)	@	dash_renderer.v1_2_2…646652.dev.js:30205
Promise.then (async)		
(anonymous)	@	dash_renderer.v1_2_2…646652.dev.js:30201
(anonymous)	@	dash_renderer.v1_2_2…646652.dev.js:27581
initialization	@	dash_renderer.v1_2_2…646652.dev.js:29502
componentDidMount	@	dash_renderer.v1_2_2…646652.dev.js:29469
commitLifeCycles	@	react-dom@16.v1_2_2m…646652.8.6.js:17469
commitAllLifeCycles	@	react-dom@16.v1_2_2m…646652.8.6.js:18871
callCallback	@	react-dom@16.v1_2_2m…84646652.8.6.js:143
invokeGuardedCallbackDev	@	react-dom@16.v1_2_2m…84646652.8.6.js:193
invokeGuardedCallback	@	react-dom@16.v1_2_2m…84646652.8.6.js:250
commitRoot	@	react-dom@16.v1_2_2m…646652.8.6.js:19083
(anonymous)	@	react-dom@16.v1_2_2m…646652.8.6.js:20553
unstable_runWithPriority	@	react@16.v1_2_2m1584646652.8.6.js:735
completeRoot	@	react-dom@16.v1_2_2m…646652.8.6.js:20552
performWorkOnRoot	@	react-dom@16.v1_2_2m…646652.8.6.js:20481
performWork	@	react-dom@16.v1_2_2m…646652.8.6.js:20389
performSyncWork	@	react-dom@16.v1_2_2m…646652.8.6.js:20363
requestWork	@	react-dom@16.v1_2_2m…646652.8.6.js:20232
scheduleWork	@	react-dom@16.v1_2_2m…646652.8.6.js:20046
scheduleRootUpdate	@	react-dom@16.v1_2_2m…646652.8.6.js:20707
updateContainerAtExpirationTime	@	react-dom@16.v1_2_2m…646652.8.6.js:20735
updateContainer	@	react-dom@16.v1_2_2m…646652.8.6.js:20792
ReactRoot.render	@	react-dom@16.v1_2_2m…646652.8.6.js:21088
(anonymous)	@	react-dom@16.v1_2_2m…646652.8.6.js:21225
unbatchedUpdates	@	react-dom@16.v1_2_2m…646652.8.6.js:20594
legacyRenderSubtreeIntoContainer	@	react-dom@16.v1_2_2m…646652.8.6.js:21221
render	@	react-dom@16.v1_2_2m…646652.8.6.js:21290
DashRenderer	@	dash_renderer.v1_2_2…646652.dev.js:29800
(anonymous)	@	(index):36