Unable to get property 'remove' of undefined or null reference

Question

According to my client-side error logs, my ReactJS app is sometimes throwing 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 in https://github.com/facebook/react/blob/35962a00084382b49d1f9e3bd36612925f360e5b/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js#L600

I've been unable to reproduce (either locally or in production).

What could be causing this problem to happen? I need some ideas of things to try that could reproduce the error.

Answer 1

I came acrossed above error "Unable to get property 'remove' of undefined or null reference" in IE11 for angular 6 application. I was using NgClass directive to set the CSS class dynamically for SVG elements.

<svg viewBox="0 0 145 110" width="145" height="110" id="svg1"> <path class="bg" [ngClass]="{'my-class': my-cond = 'condition'}" stroke="#ccc" /> </svg>

Solution: IE10 and IE11 requires the following npm, for NgClass to support on SVG elements.

    - Run > npm install --save classlist.js
    - import 'classlist.js';  // In polyfills.js

Answer 2

I've gotten this error a few times now, and it seems to happen when I'm accessing a property that doesn't yet exist in the render function. My application is using React/Redux and ImmmutableJS, and there are many AJAX calls that happen on mount of any given component, so I've got to be sure that I'm breaking out of the render function until everything is finished 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 around the loading check:

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

Checking for existence of the object also works to get rid of this pesky error.