Cannot read property 'getHostNode' of null

Question

I have a horizon/react app with react router and I have a simple button in my app:

<Link className="dark button" to="/">Another Search</Link>

When I click on it, I get the following exception:

Uncaught TypeError: Cannot read property 'getHostNode' of null

The error comes from:

getHostNode: function (internalInstance) {
    return internalInstance.getHostNode();
},

Any idea why am I getting this?

Answer 1

I was facing a similar issue. It turns out that, in my case, was highlighthjs removing comments from the generated dom.

For text, React 15 is adding comment with the reactid instead of a span tag, as in:

<!-- react-text: 248-->
Another Search
<!--/react-test-->

Can you try something like this?

<Link className="dark button" to="/"><span>Another Search</span></Link>

This will force the generated DOM to include the span with the proper data-reactid attribute.

I would file an issue with react-router, maybe they can do that internally so you would not have to bother about it. But there are challenges with that as the Link child could be basically anything.

Answer 2

I have run into this issue multiple times in the last few days (new to react) and in almost all the cases, there was some syntax/code error that was not caught anywhere else. One example: If you write:

getInitialState() {
    showModal: false
},

instead of:

getInitialState() {
    return {
        showModal: false
    };
},

you will get this error. That is unless your build process does not already catch the error. Hope this helps someone (or myself in a couple of days. Hi Niyaz, you are welcome!).

Answer 3

If anyone else finds this thread. For me this turned out to be a null error for a prop.

Code generating error:

<Menu InventoryCount={this.state.inventoryModel.length} />

Working null checked code:

<Menu InventoryCount={this.state.inventoryModel ? this.state.inventoryModel.length : 0} />

Answer 4

For me, it's a typo which results in importing component from wrong module.

import { Link, Icon } from 'react-router';
import { Tag } from 'antd';

it should be

import { Link } from 'react-router';
import { Tag, Icon } from 'antd';