Failed to get delete property from undefined or null reference

Question

According to my client-side error logs, my ReactJS application sometimes throws the following exception.

TypeError: Unable to get property 'remove' of undefined or null reference at M.willDeleteListener (eval code:17:25544) at v.deleteAllListeners (eval code:1:25843) at m.Mixin.unmountComponent (eval code:16:15442) at i.unmountComponent (eval code:15:5262) at unmountChildren (eval code:17:3368) at _.Mixin.unmountChildren (eval code:17:2153) at m.Mixin.unmountComponent (eval code:16:15442) at i.unmountComponent (eval code:15:5262) at _.unmountComponent (eval code:15:16416) at i.unmountComponent (eval code:15:5262) 

I think the source of the error is at https://github.com/facebook/react/blob/35962a00084382b49d1f9e3bd36612925f360e5b/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js#L600

I could not reproduce (locally or in production).

What could be causing this problem? I need some ideas to try and reproduce the error.

Answer 1

I got this error several times and it seems to happen when I access a property that does not exist in the render function yet. My application uses React / Redux and ImmmutableJS, and there are many AJAX calls that occur on mounting any given component, so I have to be sure that I exit the render function until everything finishes loading. For example, I get the error in question when I have this:

 render () { const displayName = this.props.myObject.get('displayName') if (this.props.loading) return <Loading /> return <div>{displayName}</div> } 

But not when I switch the download check:

 render () { if (this.props.loading) return <Loading /> const displayName = this.props.myObject.get('displayName') return <div>{displayName}</div> } 

Verifying the existence of an object also helps get rid of this annoying error.