Skip to content

No runtime type checking with TypeScript components #3014

@AnnMarieW

Description

@AnnMarieW

While working with the dash-mantine-components library, I noticed that no helpful error messages are provided in the browser DevTools when an invalid prop is passed to a dmc component -- unlike with other Dash libraries like dash-core-components.

The issue arises because dmc components are built using TypeScript. They do not use propTypes which is how the runtime type checking is done in Dash. TypeScript is not available at runtime.

Here is an example:

import dash_mantine_components as dmc from dash import Dash, dcc,_dash_renderer _dash_renderer._set_react_version("18.2.0") app = Dash() app.layout = dmc.MantineProvider([ dmc.RangeSlider(min="b"), dcc.RangeSlider(min="b") ]) if __name__ == "__main__": app.run(debug=True)

The first very helpful error message is for the dcc component (which does not use TypeScript), the second is the dmc component:

image

After discussing with the Plotly team, a solution could be to create a script that automatically adds propTypes to TypeScript components when running with debug=True. This script could use information from the metadata.json file, which already has details about the props and their types.

Metadata

Metadata

Assignees

Labels

P3backlogbugsomething broken

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions