Wrapped Images with Lazy Load Not Working Anymore After Upgrading to React 16

[dschinkel]

We upgraded our project to the following:

"react": "^16.2.0",
"react-dom": "^16.2.0",
"prop-types": "^15.6.0",
"react-lazy-load": "^3.0.13"

It breaks our entire site because almost every image on our site is wrapped with react-lazy-load. Works just fine in React 15. This is a site which receives millions of hits so if we can't get this working in React 16 then we're stuck. When we remove <LadyLoad /> below, the image comes through just fine. But we need to resolve this, so we can finish our React 16 upgrade.

We've run the code below for over a year now. But that was via React 15.

Now, after upgrading, every image in our site is broken, because wrapped with it:

<div>
    <LazyLoad debounce={false} throttle={350}>
       <img className={theme.image} src={image} alt={name} />
    </LazyLoad>
    <TilePlayButton {...{ theme, playButton }} />
    <TileBadge {...{ theme, badge }} />
    <TileNetworkIcon {...{ theme, networkIcon }} />
</div>

Here is the error we get:

invariant.js:42 Uncaught (in promise) Error: Unable to find node on an unmounted component.
    at invariant (invariant.js:42)
    at findDOMNode (react-dom.development.js:15280)
    at LazyLoad.getEventNode (LazyLoad.js:107)
    at LazyLoad.componentDidMount (LazyLoad.js:71)
    at t.notifyAll (vendor.bundle.js:25)
    at r.close (vendor.bundle.js:37)
    at r.closeAll (vendor.bundle.js:6)
    at r.perform (vendor.bundle.js:6)
    at o.perform (vendor.bundle.js:6)
    at o.perform (vendor.bundle.js:6)

Shows it's on line 107 in the lazy load source which is here:

  }, {
    key: 'getEventNode',
    value: function getEventNode() {
      return (0, _parentScroll2.default)((0, _reactDom.findDOMNode)(this));
    }
  }, {

Screenshots here show that it does not work

this is a site that gets hundreds of millions of hits so it's important to try to get it resolved. I can't figure out in the lazy code what the problem is, I've looked at it a bit.

[loktar00]

Alright going to look into this sometime today actually. Received your email as well.

[dschinkel]

The problem was that we had a web project using React v15 and then we import a shared React project of ours that the web also uses that has some shared custom React components of ours. Well that shared project was the project I upgraded from React v15 to v16. But you can't run 2 versions of react in the same project so that was causing the Unable to find node on an unmounted component error. I think your component is probably fine, we're upgrading our web project to 16 and I'll report back.

[dschinkel]

thanks again for responding @loktar00