Error with dash-mantine-components ($e.map is not a function)

Dash Python
,
1

Hi there,

I’ve been using dash for a while, but I’ve tried incorporating dash-mantine-components recently and I get a javascript error I’m not able to fix.

The error is “$e.map is not a function”, which seems to stem from an empty variable, however I’ve tried simplifying the code and downgrading dash and dash-mantine-components to address potential version conflicts and still nothing.

Does anyone have any advice on how to handle this?

The code is very simple:

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, html
_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)

app.layout = dmc.MantineProvider(
    html.Div([
        dmc.Alert(
        "Hi from Dash Mantine Components. You can create some great looking dashboards using me!",
        title="Welcome!",
        color="violet",
        ),
        dmc.MultiSelect(id='test-multiselect',
                            data=['Red', 'Blue', 'Green'],
                            value='Red')
    ])
)

if __name__ == "__main__":
    app.run(debug=True)

I’m using a conda environment with the following
dash 2.18.1
dash-bootstrap-components 1.6.0
dash-mantine-components 0.15.0

The full error trace:

TypeError: $e.map is not a function

at http://127.0.0.1:8050/_dash-component-suites/dash_mantine_components/dash_mantine_components.v0_15_0m1732091571.js:2:1443190

at renderWithHooks (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@18.v2_18_1m1726289177.2.0.js:16315:20)

at updateForwardRef (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@18.v2_18_1m1726289177.2.0.js:19236:22)

at beginWork (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@18.v2_18_1m1726289177.2.0.js:21646:18)

at beginWork$1 (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@18.v2_18_1m1726289177.2.0.js:27436:16)

at performUnitOfWork (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@18.v2_18_1m1726289177.2.0.js:26570:14)

at workLoopSync (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@18.v2_18_1m1726289177.2.0.js:26476:7)

at renderRootSync (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@18.v2_18_1m1726289177.2.0.js:26444:9)

at recoverFromConcurrentError (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@18.v2_18_1m1726289177.2.0.js:25860:22)

at performSyncWorkOnRoot (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@18.v2_18_1m1726289177.2.0.js:26106:22)
2

The error typically indicates that a list-like object was expected, but a non-list-like object was provided. Did you try wrapping the value (Red) in a list?

1 Like
3

This solved it, many thanks!

1 Like