React: 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 https://github.com/facebook/react/blob/1f487eb933756ec5f2d33a316dc92df9475b0044/src/renderers/dom/client/ReactDOMComponentTree.js#L190.

[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 https://github.com/facebook/react/pull/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)

[aweary]

AFAICT the issue stems from the fact that an INSERT_MARKUP update sets content to a string, but when the update is handled it's being handled by a DOMLazyTree method that expects a node tree

I'm not sure how it relates to those commits yet 🤔

[aweary]

It might be because useCreateElement is not being properly set. That would cause the mountImage to be string markup, and if there weren't appropriate checks in place to not use DOMLazyTree when useCreateElement is false it could throw this error, which is what I'm seeing

Screenshot of useCreateElement being undefined

Screenshot of mountImage

[aweary]

Adding to that, it looks like it's due to the wrong transaction type getting injected into ReactUpdates

ReactTestReconcileTransaction doesn't track useCreateElement and shouldn't be used in production.

[aweary]

And _that_ is because code from the shallow renderer is being included and parsed in react-dom

cc @gaearon @trueadm it looks like it's probably related to the new build process then? If you go to https://unpkg.com/[email protected]/dist/react-dom.js and search for ReactTestReconcileTransaction you'll see the shallow renderer code that's being included and causing this problem.

[gaearon]

New build process isn’t in React 15.5, only in master. Good investigation though!

[bvaughn]

Nice find, @aweary.

Dan's right, the 15.5 build process is a bit of a one-off.

[bvaughn]

And that is because code from the shallow renderer is being included and parsed in react-dom

This is because of my changes in 3a7eef2. I'm on it!

[bvaughn]

Fixed with 714e5ea. Fix will go out with our next rc 2 release in a few moments.

[bvaughn]

Sorry for the inconvenience! Thanks for reporting this @jochenberger and for help identifying the cause @aweary! You rock!

[bvaughn]

Took us a bit longer than anticipated, but RC 2 was just released and fixes this issue.
http://codepen.io/bvaughn/pen/YZbdjK?editors=0010#0

Thanks again for reporting it!