search

clauderic / react-sortable-hoc

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
https://clauderic.github.io/react-sortable-hoc/
MIT License
10.8k stars 979 forks source link

TypeError on element that renders null #667

Open wellenvogel opened 4 years ago

wellenvogel commented 4 years ago

I have a list with some elements that render null - depending on state. When I wrap them into a SortableElement it crashes with: Uncaught TypeError: Cannot set property 'sortableInfo' of null at WithSortableElement.register (react-sortable-hoc.esm.js:1541) at WithSortableElement.componentDidMount (react-sortable-hoc.esm.js:1508) at commitLifeCycles (react-dom.development.js:22101) at commitLayoutEffects (react-dom.development.js:25344) at HTMLUnknownElement.callCallback (react-dom.development.js:336) at Object.invokeGuardedCallbackDev (react-dom.development.js:385) at invokeGuardedCallback (react-dom.development.js:440) at commitRootImpl (react-dom.development.js:25082) at unstable_runWithPriority (scheduler.development.js:697) at runWithPriority$2 (react-dom.development.js:12149) Version: 1.11.0 As far as I can see it tries to find a DOM node - but there is none of course. Is there anything I can do to avoid this problem? I would like to keep the design at this point - elements becoming invisible depending on some state.

linonetwo commented 4 years ago

Me too

Uncaught TypeError: Cannot set property 'sortableInfo' of null
    at WithSortableElement.register (react-sortable-hoc.esm.js:1545)
    at WithSortableElement.componentDidMount (react-sortable-hoc.esm.js:1512)
    at commitLifeCycles (react-dom.development.js:19814)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at batchedUpdates$1 (react-dom.development.js:21862)
    at Object.notify (Subscription.js:19)
    at Subscription.notifyNestedSubs (Subscription.js:92)
    at Subscription.handleChangeWrapper (Subscription.js:97)
    at dispatch (redux.js:222)
    at Object.dispatch (index.js:11)
    at Function.<anonymous> (index.js:56)
react-sortable-hoc.esm.js:60 Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at Manager.getIndex (react-sortable-hoc.esm.js:60)
    at Manager.remove (react-sortable-hoc.esm.js:36)
    at WithSortableElement.unregister (react-sortable-hoc.esm.js:1561)
    at WithSortableElement.componentWillUnmount (react-sortable-hoc.esm.js:1535)
    at callComponentWillUnmountWithTimer (react-dom.development.js:19580)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at safelyCallComponentWillUnmount (react-dom.development.js:19587)
    at commitUnmount (react-dom.development.js:20109)
    at commitNestedUnmounts (react-dom.development.js:20163)
    at unmountHostComponents (react-dom.development.js:20443)
    at commitDeletion (react-dom.development.js:20500)
    at commitMutationEffects (react-dom.development.js:22782)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22509)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at batchedUpdates$1 (react-dom.development.js:21862)
    at Object.notify (Subscription.js:19)
    at Subscription.notifyNestedSubs (Subscription.js:92)
    at Subscription.handleChangeWrapper (Subscription.js:97)
    at dispatch (redux.js:222)
    at Object.dispatch (index.js:11)
    at Function.<anonymous> (index.js:56)
index.js:1 The above error occurred in the <sortableElement> component:
    in sortableElement (at main/index.js:269)
    in div (at main/index.js:212)
    in Unknown (created by sortableList)
    in sortableList (at main/index.js:253)
    in div (at main/index.js:247)
    in div (at main/index.js:217)
    in SidebarContainer (at main/index.js:246)
    in div (at main/index.js:244)
    in div (at main/index.js:241)
    in Main (created by WithStyles(Main))
    in WithStyles(Main) (created by ConnectFunction)
    in ConnectFunction (at src/index.js:68)
    in App (at src/index.js:144)
    in I18nextProvider (at src/index.js:143)
    in Suspense (at src/index.js:142)
    in PickersLocalizationProvider (created by WithDefaultProps(PickersLocalizationProvider))
    in WithDefaultProps(PickersLocalizationProvider) (at app-wrapper.js:50)
    in ThemeProvider (at app-wrapper.js:49)
    in AppWrapper (created by ConnectFunction)
    in ConnectFunction (at src/index.js:140)
    in Provider (at src/index.js:139)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
VM81 require-nodejs.js:10 Uncaught Error: Uncaught TypeError: Cannot set property 'sortableInfo' of null
    at EventEmitter.<anonymous> (VM81 require-nodejs.js:10)
    at EventEmitter.emit (VM10 events.js:223)
    at Object.onMessage (VM55 renderer_init.js:114)
index.js:1 The above error occurred in the <sortableElement> component:
    in sortableElement (at main/index.js:269)
    in div (at main/index.js:212)
    in Unknown (created by sortableList)
    in sortableList (at main/index.js:253)
    in div (at main/index.js:247)
    in div (at main/index.js:217)
    in SidebarContainer (at main/index.js:246)
    in div (at main/index.js:244)
    in div (at main/index.js:241)
    in Main (created by WithStyles(Main))
    in WithStyles(Main) (created by ConnectFunction)
    in ConnectFunction (at src/index.js:68)
    in App (at src/index.js:144)
    in I18nextProvider (at src/index.js:143)
    in Suspense (at src/index.js:142)
    in PickersLocalizationProvider (created by WithDefaultProps(PickersLocalizationProvider))
    in WithDefaultProps(PickersLocalizationProvider) (at app-wrapper.js:50)
    in ThemeProvider (at app-wrapper.js:49)
    in AppWrapper (created by ConnectFunction)
    in ConnectFunction (at src/index.js:140)
    in Provider (at src/index.js:139)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
scheduler.development.js:178 Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at Manager.getIndex (react-sortable-hoc.esm.js:60)
    at Manager.remove (react-sortable-hoc.esm.js:36)
    at WithSortableElement.unregister (react-sortable-hoc.esm.js:1561)
    at WithSortableElement.componentWillUnmount (react-sortable-hoc.esm.js:1535)
    at callComponentWillUnmountWithTimer (react-dom.development.js:19580)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at safelyCallComponentWillUnmount (react-dom.development.js:19587)
    at commitUnmount (react-dom.development.js:20109)
    at commitNestedUnmounts (react-dom.development.js:20163)
    at unmountHostComponents (react-dom.development.js:20443)
    at commitDeletion (react-dom.development.js:20500)
    at commitMutationEffects (react-dom.development.js:22782)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22509)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at batchedUpdates$1 (react-dom.development.js:21862)
    at Object.notify (Subscription.js:19)
    at Subscription.notifyNestedSubs (Subscription.js:92)
    at Subscription.handleChangeWrapper (Subscription.js:97)
    at dispatch (redux.js:222)
    at Object.dispatch (index.js:11)
    at Function.<anonymous> (index.js:56)
abeledovictor commented 4 years ago

Any idea on what's causing this error? I was able to reproduce it on version 1.10 and 1.11. Wasn't happening on v 1.9

linonetwo commented 3 years ago

OMG how did I solved this? I meet this again...

linonetwo commented 3 years ago

I use @dnd-kit/core" instead of react-sortable-hoc this time! it is created by the same author.

thekennysong commented 3 years ago

To anyone else struggling with this, make sure to render an empty div instead of Fragment !