This repository was archived by the owner on Jun 4, 2024. It is now read-only.
This repository was archived by the owner on Jun 4, 2024. It is now read-only.
DataTable error when combined with dcc.Tabs #406
Open
Description
I'm getting an error when creating a DataTable in an app that uses tabs. I found a similar issue that was popping up when it was still dash_table_experiments and was able to get a solution to this problem from this community post. That said, I wasn't certain if this is still a bug or not as it looked like this was resolved when dash_table got released and I haven't been able to see any other issues come up for this.
You can reproduce with this minimal example:
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd
app = dash.Dash(__name__)
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
app.layout = html.Div([
dcc.Tabs(
id='tabs',
children=[
dcc.Tab(
label='Tab one',
children=[
dash_table.DataTable(
id='table',
columns=[{"name": i, "id": i} for i in df.columns],
data=df.to_dict("rows"),
)
]
),
dcc.Tab(
label='Tab two',
children=[
html.H1('This is tab two')
]
)
])
])
if __name__ == '__main__':
app.run_server(debug=True)My fix was to create a dummy datatable on the second tab like so:
dcc.Tab(
label='Tab two',
children=[
html.H1('This is tab two')
html.Div(
dash_table.DataTable(data=[{}], columns=[]),
style={'display': 'none'})
]Here are the console error messages I'm getting
Error on FF v66:
NotFoundError: Node was not found react-dom@15.4.2.min.js:12
Error on Chrome v73:
react-dom@15.4.2.min.js?v=0.21.0&m=1552054944:12 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
Environment
dash 0.40.0
dash-core-components 0.45.0
dash-html-components 0.15.0
dash-renderer 0.21.0
dash-table 3.6.0
Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
Activity
Marc-Andre-Rivet commentedon Apr 2, 2019
@mbkupfer Thanks for reporting this issue. Unfortunately, I have been unable to reproduce the problem with the example provided above in both Chrome 73 and Firefox 66. Are the errors triggered by certain specific actions apart from switching tabs? Can you share the error's stack trace?
Investigation Notes
Maybe the error is triggered inside react or in some dash code. If in dash, there's only one
removeChildusage -- in dash-table scrollbarWidth.mbkupfer commentedon Apr 2, 2019
That's pretty odd. Just to be sure, I created a fresh virtual environment and I'm still getting the error. The error comes up when I change tabs. The error only shows up in the browser dev-console (not in command line).
Here is the really long stack trace that I get in FF:
In chrome it is slightly different:
And just for completeness, here is what I'm getting in IE 11
kevalshah90 commentedon Jun 20, 2019
@mbkupfer @Marc-Andre-Rivet I am running into the same problem with rendering DataTable on multi-page layout. Were you able to find a fix?
Links for context: https://stackoverflow.com/questions/56639423/rendering-datatable-from-callback-function-dash
#472
kevinfaust0308 commentedon Jul 28, 2019
i get a different issue with me. i have a datatable in one tab and when i try to switch to another tab, i get the following error "An object was provided as
childreninstead of a component, string, or number (or list of those). Check the children property that looks something like: ..."msherman13 commentedon Sep 18, 2019
having this same issue.
lopezco commentedon Oct 22, 2019
Same for me
jing0703 commentedon Sep 17, 2020
The same error when returning list of dictionary:
Error: An object was provided as
childreninstead of a component, string, or number (or list of those). Check the children property that looks something like:{
"Assets": 90099071,
"Internal Assets": 0,
"Revenue": 1604313975,
"Share Class Exception": "Y"
}
at hu (dash_renderer.v1_6_0m1598285657.min.js:20)
at a.value (dash_renderer.v1_6_0m1598285657.min.js:20)
at a.value (dash_renderer.v1_6_0m1598285657.min.js:20)
at Ie (react-dom@16.v1_6_0m1598285657.13.0.min.js:104)
at rh (react-dom@16.v1_6_0m1598285657.13.0.min.js:103)
at zj (react-dom@16.v1_6_0m1598285657.13.0.min.js:228)
at Th (react-dom@16.v1_6_0m1598285657.13.0.min.js:152)
at tj (react-dom@16.v1_6_0m1598285657.13.0.min.js:152)
at Te (react-dom@16.v1_6_0m1598285657.13.0.min.js:146)
at react-dom@16.v1_6_0m1598285657.13.0.min.js:61