inferno-dom.js:391 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

[cvg1]

hello,

i'm sporadically receiving this one below::

inferno-dom.js:391 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The  node to be removed is not a child of this node.

updateNonKeyed @ inferno-dom.js:391
updateDynamicChild @ inferno-dom.js:573
update @ inferno-dom.js:2644
update @ inferno-dom.js:2736
instance.forceUpdate @ inferno-dom.js:3063
_updateComponent @ inferno-component.js:229
update @ inferno-dom.js:3135
instance.forceUpdate @ inferno-dom.js:3063
_updateComponent @ inferno-component.js:229
(anonymous function) @ inferno-component.js:116

snippet from inferno-dom.js [390-394]:

                    if (domNodeList[i + offset]) {
                        parentNode.removeChild(domNodeList[i + offset]);
                        domNodeList.splice(i + offset, 1);
                        offset--;
                    }

i wasn't able to create example for reproducing it. i will re-try again in a few days.

using dev branch build: 3bb4223
thank you,
regards

[trueadm]

Hey @cvg1,

We're currently working on a new branch, spike that has a re-written core. It has some major breaking changes in it, such as it no longer uses createTemplate. If you'd be interested to test this issue on it, that would be awesome. In fact, if you said hello on the Inferno Slack, we could get you working with it sooner! Let me know via email [email protected] if you want an invite :)

[cvg1]

i did narrow down the cause to iterable rendered via JSX template. after i added key attribute to each iterated element to define uniqueness (same way as react is doing), the exception is not being thrown anymore.
note that i still cannot provide case for reproducing it.

  class MyComponent99 extends InfernoComponent.Component {
      render() {
          return (
              <div>
                  {[1, 2, 3].map( p => { return (<div key={p}>{p}</div>); })}
              </div>
          );
      };
  };

[trueadm]

@cvg1 does this still happen with the latest spike branches?

[cvg1]

i'm trying to do some testing with latest spike (1db600c) and i'm having issues with form elements that have onKeyUp mouse event listener set as these are not being triggered.

[cvg1]

there is also this trace below:

inferno-dom.js:262 Uncaught NotFoundError: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.

replaceNode @   inferno-dom.js:262
diffNodes   @   inferno-dom.js:893
diffChildren    @   inferno-dom.js:758
diffNodes   @   inferno-dom.js:909
patchNode   @   inferno-dom.js:340
patchNonKeyedChildren   @   inferno-dom.js:558
patchArrayChildren  @   inferno-dom.js:724
diffChildren    @   inferno-dom.js:748
diffNodes   @   inferno-dom.js:909
(anonymous function)    @   inferno-component.js:111
applyState  @   inferno-component.js:117
queueStateChanges   @   inferno-component.js:89
setState    @   inferno-component.js:158
(anonymous function)    @   app.js:389

because this behavior was less sporadic in comparison to initial issue, here is the test case:

import Inferno from 'inferno';
import InfernoDOM from 'inferno-dom';
import InfernoComponent from 'inferno-component';

//1st case:
//-----------
//- click on HT button before '5s tick' message appears in console.
//- then after 5s you will receive::
//      Uncaught TypeError: Cannot read property 'replaceChild' of null
//
//2nd case:
//-----------
//- click on HT button after '5s tick' message appears in console.
//- then you will receive::
//      Uncaught NotFoundError: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.

class MakeX extends InfernoComponent.Component {
  constructor(props) {
    super(props);
    this.state = {x: false};
  };
  render() {
    return (
        <div>
            <input type='button' value='HT' onclick={() => { this.setState({x: true}); }} />
            {!this.state.x?<MakeA />:<MakeY />}
        </div>
    );
  };
};

class MakeY extends InfernoComponent.Component {
  constructor(props) {
    super(props);
  };
  render() {
    return (<div>Y</div>);
  };
};

class MakeA extends InfernoComponent.Component {
  constructor(props) {
    super(props);
    this.state = {z: false};
  };

  componentWillMount() { 
    setTimeout(() => {
        console.log("5s tick");
        this.setState(Object.assign({}, {z: true}));
    }, 5000);
  };

  render() {
    if (!this.state.z)
        return (<div>A</div>);

    return (<MakeB />);
  };
};

class MakeB extends InfernoComponent.Component {
  constructor(props) {
    super(props);
  };

  render() {
    return (<div>B</div>);
  };
};

InfernoDOM.render(
  <MakeX />, document.getElementById("app"));

sorry for delays,
regards

[cvg1]

let me know if i can help any further. perhaps the case is too long?

[Havunen]

I can take a look into this today

[Havunen]

I have successfully reproduced this issue. It looks like bug.

[trueadm]

@cvg1 can you try with the latest spike. I think I might have fixed this issue now.

[cvg1]

hello,
both test cases above are fixed now, however new case appeared.
here is new gist for reproducing.

[cvg1]

i've also noticed that in spike, refs i've applied DOM modification to in didmount/didupdate sections are sometimes not being reflected in real DOM. it seems that the 2nd time the component is going through didupdate process, ref is then reflected in real DOM.

[Havunen]

Hey @cvg1 This issue should be fixed in latest spike, can you verify please?

[trueadm]

@cvg1 are you having an issue with refs as a separate issue? If so, please can you raise another issue with an example? That would be awesome thanks!

[TylorS]

Hello, I've been experimenting with a Cycle.js driver, and I'm also running into this bug rather sporadically as well.

I'll hopefully have something to actually share soon.

[TylorS]

I have a working Cycle.js driver here at: https://github.com/TylorS/cyclic-inferno
Everything seems to be as normal but then when I run into this bug everything stops rendering after that.

There is a runnable example in the repo; available by running npm install && npm run test-browser-perf

I'm not very knowledgeable on Inferno, but if there is anything I can do to help please let me know :smile:

[trueadm]

@TylorS this is fixed in the latest dev branch. We're soon going to release, we're just waiting on some further perf fixes. :)

[TylorS]

Wonderful :+1:

[TylorS]

I'm running the sample text example with the latest from the dev branch, and I'm still experiencing this issue.

[TylorS]

I take my previous comment back, the problem was me :+1:

Thank you!

[trueadm]

Thanks, closing issue now! :)

[sxwebdev]

Hello. I have a similar problem. With what it can be connected? How to fix it?
thx.