CODEWITHSUNDEEP
reactjs
Andrew Davey
Andrew Davey

Reputation: 5451

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

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.

Upvotes: 9

Views: 3846

Answers (3)

Abhijeet Giram
Abhijeet Giram

Reputation: 125

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

Upvotes: 2

Varun Arora
Varun Arora

Reputation: 342

Piggybacking on @LaurelB's response, I diagnosed this to happen on React elements when I toggle the function of an event bind (say onClick) based on some variable whose value changes. I realized this might not be good practice, after all.

Upvotes: 0

LaurelT
LaurelT

Reputation: 115

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.

Upvotes: 1

Related Questions