breaking with react-virtualized #228

ritz078 · 2016-10-17T17:32:19Z

Hi,

whenever I try to update react-virtualized data, it throws an error

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

error stack

VM7842:1 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at eval (eval at evaluate (:117:21), <anonymous>:1:9)
    at Object.removeResizeListener (http://l.housing.com:4000/searchView.js:4972:7)
    at AutoSizer.componentWillUnmount (http://l.housing.com:4000/searchView.js:2366:35)
    at unmountComponent (http://l.housing.com:4000/vendor.js:4244:55)
    at unmountComponent (http://l.housing.com:4000/vendor.js:4247:20)
    at recollectNodeTree (http://l.housing.com:4000/vendor.js:4112:24)
    at removeOrphanedChildren (http://l.housing.com:4000/vendor.js:4108:63)
    at innerDiffNode (http://l.housing.com:4000/vendor.js:4105:32)
    at idiff (http://l.housing.com:4000/vendor.js:4055:279)
    at innerDiffNode (http://l.housing.com:4000/vendor.js:4101:21)

. I set up a plunker of react-virtualized with preact and its working fine on first render. This is mainly an issue with preact-compat I guess.

cc: @bvaughn - in case anything can be done from your side. This error doesn't occur if I don't change the height of the container.

The text was updated successfully, but these errors were encountered:

developit · 2016-10-17T17:43:43Z

@bvaughn - curious if there's anything funky being done on your end relating to height measurement?

developit · 2016-10-17T18:56:26Z

Ah, I have an idea what is causing this. Preact's diff removes elements it didn't create, React's doesn't. I'll look into a reliable way of ignoring unknown children!

bvaughn · 2016-10-17T20:41:06Z

Hey @ritz078

I created a Plnkr a few days back that showed Preact and react-virtualized working together. Have you seen it, by chance?

https://embed.plnkr.co/48amzdx0Wkv6pja4j99j/

In Facebook onboarding all day without a laptop FYI so my responses will be few and far between unfortunately.

ritz078 · 2016-10-17T20:46:49Z

saw it. I don't think there's any error in react-virtualized. Its a preact-compat issue. Just tagged you incase anyone else faces the same issue with RV.

btw I didn't expect your reply as I was familiar that today's your 1st day at fb. 😄

ritz078 · 2016-10-18T20:46:32Z

@developit let me know if there is any immediate fix.

developit · 2016-10-28T12:42:01Z

@ritz078 I'm thinking this might be the same issue as (and thus solved by) preactjs/preact#373

ritz078 · 2016-10-28T12:55:51Z

Actually it doesn't solve the issue. I upgraded to 6.4.0 but still getting that issue.

developit · 2016-10-28T13:14:49Z

Ah right, I forgot this was more related to removal of non-owned nodes. Sorry about that!

developit · 2016-11-05T04:04:38Z

Pretty sure I have a way to make this work. Will ping you about it once I have a beta ready.

bvaughn · 2016-11-05T04:51:00Z

Nice!

developit · 2016-11-11T00:28:43Z

preact@7.0.1 (beta) should fix this.

andest01 · 2016-11-11T20:11:01Z

I had a similar bug with Mapbox GL. Mapbox's DOM was getting removed. Updating to preact@7.0.1 fixed this.

developit · 2016-11-11T20:11:57Z

Awesome. Yeah this change should fix a ton of those little things, it's been a long time coming.

ritz078 · 2016-11-19T20:23:58Z

Sadly the issue remains. Actually I had forked react-virtualized and commented the line that caused error so I was getting no error but with RV it still exists. using v7.0.3

bvaughn · 2016-11-19T22:08:51Z

Hey @ritz078,

I really want RV and Preact to play nice out of the box. If there's a backwards compatible patch I could apply on the RV side to help, let me know.

If you guys are still on the 7.0 version, I'm willing to make one last 7.x bugfix release even.

ritz078 · 2016-11-19T22:11:15Z

we are on 8. You can see the line creating the error.

I removed it and everything worked fine but I don't think that's an error on RV side.

bvaughn · 2016-11-19T22:13:39Z

Oh! Sorry. I mistook your 7.0.3 reference to be about RV. 🙇

Yeah, I see the error but I don't now the implications of commenting out that line. (Admittedly, I haven't been following along super closely because I've been distracted with other things recently.) If there's a safe way to handle/catch/prevent that error- I'd be willing to consider patching it on the RV side.

If Preact can handle it, better still. 😁

developit · 2016-11-19T22:13:44Z

Is the auto size thing part of RV, or something else?

bvaughn · 2016-11-19T22:18:17Z

It started off as a fork of sdecima/javascript-detect-element-resize (because that util wasn't really packaged up to be used by RV) but since then I've added several performance optimizations to it- mostly to prevent unnecessary reflows.

bvaughn · 2016-11-19T22:18:44Z

Maybe I should package it up as its own standalone lib that RV specifies a dependency to.

developit · 2016-11-19T22:54:59Z

Could do. I only mentioned it because I tried to reproduce this issue and I felt like I was missing that piece. I couldn't get RV to break :(

bvaughn · 2016-11-19T22:56:09Z

I couldn't get RV to break - Jason Miller

To Twitter! 😂

On Nov 19, 2016 2:55 PM, "Jason Miller" notifications@github.com wrote:

Could do. I only mentioned it because I tried to reproduce this issue and
I felt like I was missing that piece. I couldn't get RV to break :(

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#228 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABznXKgDK5mdDduv1TZjJvCQlEaY67Uks5q_35DgaJpZM4KY5HA
.

ritz078 · 2016-11-20T20:31:32Z

I tried on plunker but was unable to reproduce. Commenting that line is helping but will see if there are any perf issues. There aren't any functional issues though.

klaemo · 2016-12-03T09:55:13Z

Unfortunately, I'm still seeing this issue with preact 7.1.0, preact-compat 3.9.3 and react-virtualized 8.7.0 (using AutoSizer exclusively).
Using the webpack alias method to swap in preact:

alias: {
  'react': 'preact-compat',
  'react-dom': 'preact-compat',
  'react-addons-css-transition-group': 'preact-css-transition-group',
  'react-addons-shallow-compare': 'shallow-compare'
}

Here's the component, I don't think I'm doing anything too weird:

import React, { PropTypes, Component } from 'react'
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
import classNames from 'classnames'

class Votes extends Component {
  render (props) {
    const { possibleAnswers, voteClickHandler } = props
    const count = possibleAnswers.length
    const oddOrEven = count % 2 !== 0 || count === 2 ? 'odd' : 'even'
    const votesClass = classNames('widget-votes', oddOrEven, `votes-${count}`)

    return (
      <section className={votesClass}>
        <AutoSizer disableWidth>
          {({ height }) => {
            const cellHeight = oddOrEven === 'odd' ? (height / count) : (height / (count / 2))

            return possibleAnswers.map((answer) => (
              <div key={answer.id} className='vote-container' style={{ height: cellHeight }}>
                <button
                  title={answer.text}
                  onClick={() => voteClickHandler(answer.id)}
                  className='vote-btn'
                >
                  <div className='vote-btn-text'>{answer.text}</div>
                  <div className='vote-btn-fade' />
                </button>
              </div>
            ))
          }}
        </AutoSizer>
      </section>
    )
  }
}

developit · 2016-12-03T13:23:21Z

I wonder if AutoSizer is actually moving the element? That would be an issue for sure..

bvaughn · 2016-12-03T15:58:19Z

AutoSizer is built on top of a modified (for performance) version of the detect-element-resize library. You can see the DOM manipulation it's doing here.

Let me know if you'd like to chat about it.

ritz078 · 2017-01-11T22:47:45Z

So continuing here. this fixes it.

Any other error after removing this ? Not so far. Have been testing internally since more than a month.

Perf issues ? Doesn't seem so. (but maybe I missed something ? monitoring.)

bvaughn · 2017-01-11T22:51:04Z

Oh man! If that's the only error- let's get that commit merged into RV and I'll put out a point release.

Looks like you guys are based off of 8.2.0. RV main is on 8.9.0 now so the fix would go out as 8.9.1 - but if it's important for you to stay on 8.2.0 I could release an 8.2.1 fix as well.

ritz078 · 2017-01-11T22:57:41Z

We shouldn't have any problem upgrading. Will get this tested by tomorrow or maybe you can do a beta release and I can test it.

developit · 2017-01-11T23:59:11Z

brian that technique for unsetting the element reference is my favorite

For more history see preactjs/preact-compat#228

bvaughn · 2017-01-17T06:48:05Z

FYI this change has been applied to react-virtualized with 78910b6 and released as 8.11.0.

bvaughn · 2017-01-17T06:48:18Z

Think we can close this issue now?

ritz078 · 2017-01-17T06:51:46Z

I think we can. 👏 we are upgrading now and will comment here if something doesn't work.

bvaughn · 2017-01-17T07:19:31Z

Fantastic. Best of luck

…

On Jan 16, 2017 10:51 PM, "Ritesh Kumar" ***@***.***> wrote: I think we can. 👏 we are upgrading now and will comment here if something doesn't work. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#228 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABznTdc03eHQBbAYyblswXYDJca-fVJks5rTGUCgaJpZM4KY5HA> .

developit · 2017-01-17T11:59:37Z

you guys are the best

For more history see preactjs/preact-compat#228

developit mentioned this issue Nov 5, 2016

Compatibility with tomchentw/react-google-maps (and more generally) preactjs/preact#385

Closed

bvaughn pushed a commit to bvaughn/react-virtualized that referenced this issue Jan 17, 2017

detect element resize remove listener try/catch for Preact compat

78910b6

For more history see preactjs/preact-compat#228

ritz078 closed this as completed Jan 17, 2017

ineentho pushed a commit to ineentho/esm-detect-element-resize that referenced this issue Sep 22, 2017

detect element resize remove listener try/catch for Preact compat

5e73aba

For more history see preactjs/preact-compat#228

ineentho pushed a commit to ineentho/esm-detect-element-resize that referenced this issue Sep 22, 2017

detect element resize remove listener try/catch for Preact compat

24c4f72

For more history see preactjs/preact-compat#228

barryjo added a commit to barryjo/react-tablist that referenced this issue Jul 19, 2020

detect element resize remove listener try/catch for Preact compat

888a40c

For more history see preactjs/preact-compat#228

breaking with react-virtualized #228

breaking with react-virtualized #228

Comments

ritz078 commented Oct 17, 2016

developit commented Oct 17, 2016

developit commented Oct 17, 2016

bvaughn commented Oct 17, 2016

ritz078 commented Oct 17, 2016

ritz078 commented Oct 18, 2016 • edited Loading

developit commented Oct 28, 2016

ritz078 commented Oct 28, 2016 • edited Loading

developit commented Oct 28, 2016

developit commented Nov 5, 2016

bvaughn commented Nov 5, 2016 via email

developit commented Nov 11, 2016

andest01 commented Nov 11, 2016

developit commented Nov 11, 2016

ritz078 commented Nov 19, 2016

bvaughn commented Nov 19, 2016

ritz078 commented Nov 19, 2016

bvaughn commented Nov 19, 2016

developit commented Nov 19, 2016

bvaughn commented Nov 19, 2016 • edited Loading

bvaughn commented Nov 19, 2016

developit commented Nov 19, 2016

bvaughn commented Nov 19, 2016

ritz078 commented Nov 20, 2016

klaemo commented Dec 3, 2016 • edited Loading

developit commented Dec 3, 2016

bvaughn commented Dec 3, 2016

ritz078 commented Jan 11, 2017 • edited Loading

bvaughn commented Jan 11, 2017

ritz078 commented Jan 11, 2017 • edited Loading

developit commented Jan 11, 2017

bvaughn commented Jan 17, 2017

bvaughn commented Jan 17, 2017

ritz078 commented Jan 17, 2017

bvaughn commented Jan 17, 2017 via email

developit commented Jan 17, 2017

ritz078 commented Oct 18, 2016 •

edited

Loading

ritz078 commented Oct 28, 2016 •

edited

Loading

bvaughn commented Nov 19, 2016 •

edited

Loading

klaemo commented Dec 3, 2016 •

edited

Loading

ritz078 commented Jan 11, 2017 •

edited

Loading

ritz078 commented Jan 11, 2017 •

edited

Loading