Dash 2 Migration - Layout Error


When bumping Dash from 1.21 to 2.0.0 and having followed instructions in the migration guide, I’m dealing with a layout issue with the following JS error :

Uncaught TypeError: Cannot read properties of null (reading 'indexOf')
    at _indexOf.js:5
    at a (_includes.js:3)
    at t (_curry2.js:28)
    at Checklist.react.js:43
    at Array.map (<anonymous>)
    at s.value (Checklist.react.js:36)
    at finishClassComponent (react-dom@16.v2_0_0m1633516564.14.0.js:17295)
    at updateClassComponent (react-dom@16.v2_0_0m1633516564.14.0.js:17245)
    at beginWork (react-dom@16.v2_0_0m1633516564.14.0.js:18755)
    at HTMLUnknownElement.callCallback (react-dom@16.v2_0_0m1633516564.14.0.js:182)

I’m currently using Chrome. Any ideas on how to get more clues to find the root cause of the error ?

I have failed to find a MWE as I’m not quite familiar on how to investigate JS errors and I have found little information on such an error on the net as well as Dash community forum.

Thanks in advance for your help :slight_smile:

Hi @Xela95

If you post a MWE Dash app that generates this error, I might be able to help. I haven’t seen this exact error message, but I have a few ideas about what might be causing it.

I have just achieved to resolve the error. It was due to call from a dictionary in a dcc.Store that would send values to the layout, but with a shuffled order : that would result in a dropdown adapted prop value sent to checklist value prop.

For some very odd reason, I have only encountered the error in Dash 2, with or without orjson. I have no clue why my dictionary in the dcc.Store was shuffled only with Dash 2. :face_with_raised_eyebrow:

Anyways, I can carry on to write Dash code with Dash 2 as I have used an ordered dictionary to preserve keys order :slight_smile:

1 Like