Add debug info for error "TypeError: Cannot read property 'getHostNode' of null"

[Dema]

Do you want to request a feature or report a bug?
feature
What is the current behavior?
When there is an undefined component somewhere deep in the hierarchy React throws this message:

TypeError: Cannot read property 'getHostNode' of null
at Object.getHostNode (webpack:///./~/react/lib/ReactReconciler.js?:64:28)

What is the expected behavior?

Please add debugging information about a place where this happens. At least name of current or parent node.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
15.3.2

[gaearon]

What does

undefined component

mean?

Can you please provide an example code?

[Dema]

I'm not able to reproduce this error in clean app created with create-react-app, so I'll try to explain what I've found.

I have an app that uses react-router v3 and requires login. I placed logic that shows a login popup in App component's render method like this:

<div className="col-md-12">
    <ApplicationErrors/>
    {this.props.token && this.props.children || <Login/>}
</div>

I'm navigating to the page that has method

componentWillMount() {
    this.props.someUndefinedField(this.props.routeParams.id)
}

property someUndefinedField is undefined accidentially

After I click on "Login" button, token props is updated to some string value. At this point React crashes with an error

    ReactReconciler.js:64 Uncaught (in promise) TypeError: Cannot read property 'getHostNode' of null
        at Object.getHostNode (webpack:///./~/react/lib/ReactReconciler.js?:64:28)
        at ReactCompositeComponentWrapper.getHostNode (webpack:///./~/react/lib/ReactCompositeComponent.js?:383:28)
        at Object.getHostNode (webpack:///./~/react/lib/ReactReconciler.js?:64:29)
        at Object.updateChildren (webpack:///./~/react/lib/ReactChildReconciler.js?:114:48)
        at ReactDOMComponent._reconcilerUpdateChildren (webpack:///./~/react/lib/ReactMultiChild.js?:210:32)
        at ReactDOMComponent._updateChildren (webpack:///./~/react/lib/ReactMultiChild.js?:314:31)
        at ReactDOMComponent.updateChildren (webpack:///./~/react/lib/ReactMultiChild.js?:301:12)
        at ReactDOMComponent._updateDOMChildren (webpack:///./~/react/lib/ReactDOMComponent.js?:942:12)
        at ReactDOMComponent.updateComponent (webpack:///./~/react/lib/ReactDOMComponent.js?:760:10)
        at ReactDOMComponent.receiveComponent (webpack:///./~/react/lib/ReactDOMComponent.js?:718:10)

In this piece of code React does the following:

prevChild = prevChildren && prevChildren[name];
var prevElement = prevChild && prevChild._currentElement;
var nextElement = nextChildren[name];
if (prevChild != null && shouldUpdateReactComponent(prevElement, nextElement)) {
ReactReconciler.receiveComponent(prevChild, nextElement, transaction, context);
nextChildren[name] = prevChild;
} else {
if (prevChild) {
    removedNodes[name] = ReactReconciler.getHostNode(prevChild);
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ReactReconciler.unmountComponent(prevChild, false);
}

I've found that it iterates through elements that were already unmounted. I've added console.log(this._debugID) to
ReactCompositeComponent.unmountComponent method and saw that React tries to call getHostNode on the component that was already unmounted. removedNodes object is empty at that moment.

I've found two ways to prevent React from crashing:

First is to replace

{this.props.token && this.props.children || <Login/>}

with

<span>{!this.props.token && <Login/>}</span>
<span>{this.props.token && this.props.children}</span>

and second is to replace componentWillMount with componentDidMount

After any of these corrections React doesn't crash and error about calling undefined function is shown in the console.

[gaearon]

@Dema Are you confident you don't have a Promise swallowing the original error? Like a catch() block that doesn't just handle network request but also a setState() call. This is the most common mistake with how people use Promises in React. The original error gets swallowed, and now React is an inconsistent state which is why next errors are cryptic.

[Dema]

Yeah, this is actually could be the case. Because it fails with the same error even if I make a mistake in render function... I'll try to investigate it further, thank you very much!

[Dema]

Yep. You are absolutely right! It is exactly the scenario you described. Most likely it is an error in redux-form package I'm using for forms. I've added a bug report. redux-form/redux-form#2068 (comment). Spent all three hours debugging it :)

[gaearon]

A small update on this. We just released React 16 beta which shouldn’t emit cryptic errors like this one. Even if the application code swallows an error, React 16 will still print it to the console. It might be too early for you to try React 16 (since ecosystem is still preparing for it), but this error should never occur in the future after you switch to it.