TypeError: Cannot read property 'firstChild' of null at precacheChildNodes (react-dom.js:6619)

[jochenberger]

With 15.5.0-rc.1, I get

Uncaught TypeError: Cannot read property 'firstChild' of null
    at precacheChildNodes (react-dom.js:6619)
    at getNodeFromInstance (react-dom.js:6714)
    at ReactDOMComponent.trapBubbledEventsLocal (react-dom.js:5772)
    at CallbackQueue.notifyAll (react-dom.js:948)
    at ReactTestReconcileTransaction.close (react-dom.js:12207)
    at ReactTestReconcileTransaction.closeAll (react-dom.js:14993)
    at ReactTestReconcileTransaction.perform (react-dom.js:14940)
    at ReactUpdatesFlushTransaction.perform (react-dom.js:14927)
    at ReactUpdatesFlushTransaction.perform (react-dom.js:13047)
    at Object.flushBatchedUpdates (react-dom.js:13130)

[jochenberger]

And also on another code path:

react-dom.js:6619 Uncaught TypeError: Cannot read property 'firstChild' of null
    at precacheChildNodes (react-dom.js:6619)
    at Object.getNodeFromInstance (react-dom.js:6714)
    at Object.didPutListener (react-dom.js:13926)
    at Object.putListener (react-dom.js:2556)
    at Object.putListener (react-dom.js:5692)
    at CallbackQueue.notifyAll (react-dom.js:948)
    at ReactTestReconcileTransaction.close (react-dom.js:12207)
    at ReactTestReconcileTransaction.closeAll (react-dom.js:14993)
    at ReactTestReconcileTransaction.perform (react-dom.js:14940)
    at ReactUpdatesFlushTransaction.perform (react-dom.js:14927)

[gaearon]

Please create a minimal reproducing example. Otherwise we can't really help because there's no way to diagnose what happened.

[jochenberger]

Yes, I'm trying to figure out what goes wrong. I suspect it has something to do with detached DOM trees. At least inst._hostNode is null in

react/src/renderers/dom/client/ReactDOMComponentTree.js

Line 190 in 1f487eb

precacheChildNodes(inst, inst._hostNode);

.

[jochenberger]

See http://codepen.io/jochenberger/pen/wJbJpo?editors=0010#0
Actually, I can't get it to work at all. If you select "2", it still says "Selected 1". It works fine with 15.4.2 though.

[syranide]

Yeah React seems totally broken. It breaks if you update state in any way, even without the select-element (if it isn't codepen breaking it).

[gaearon]

Looks like a bug in RC.

[aweary]

I created a JSFiddle using 15.5.0-rc.1 that contains a controlled text input, controlled select and a counter. I'm not seeing the error reported in the Codepen. Basic state updates appear to be working fine.

[bvaughn]

The Codepen (here) is comparing a string value ("2") to a numeric value (2) which makes it appear to fail.

Edit Actually that was just masking another error, which is the same one @acdlite and @flarnie were discussing last night:

Uncaught TypeError: Cannot read property 'nodeType' of undefined at Function.insertTreeBefore

I noticed this same error when running 15.5 rc1 against react-virtualized unit tests. (Haven't yet tracked down the cause though.)

[aweary]

It appears to be related to reconciliation when the render output is different, specifically

{ this.state.value == 1 && <div>Selected 1</div>}
{ this.state.value == 2 && <div>Selected 2</div>}

If you remove those two lines that conditionally render divs it works fine. If I add those lines to the JSFiddle it will break once the node is removed and then re-added.

[nhunzaker]

@aweary Suspicious. I made a significant change to controlled inputs. Do you think it is related to #7359?

[aweary]

@nhunzaker no I don't think so. It looks like the lazy tree updates expect that an update be an actual node, but it's being passed as a string:

[syranide]

@nhunzaker It is not caused by the <select>, it breaks without it too.

[bvaughn]

@nhunzaker @aweary FWIW there were 6 cherrypicked commits in the 15.5-dev branch. The rest of the changes were deprecations and small relocations. The cherrypicked commits were:

fe4a5b4 Fix Chrome number input backspace and invalid input issue (#7359)
ef38390 Add component stack to invalid element type warning (#8495)
17434d7 Fix test renderer unmount (#8512)
ac53db3 Delete @nosideeffect annotation (#8882)
9d21b52 Change the order between function declaration and object assignment (#8895)
e33eab4 Bump fbjs to 0.8.9 (#8910)