React: Cryptic error message for findDOMNode of unmounted component

[jimfb]

As per https://github.com/facebook/react/issues/2410#issuecomment-115659185: findDOMNode(this) throws for unmounted components, but the error message is too cryptic:

Uncaught Error: Invariant Violation: Component (with keys: getDOMNode,_handleChange,props,context,state,refs,_reactInternalInstance) contains render method but is not mounted in the DOM

Some expert React users honestly thought they had duplicate React or something, so didn't even bother to check whether the component was mounted. (It wasn't.)

[saemie]

@jimfb I have this exact problem. Did you find a solution?

[saemie]

My problem was that I was using an old version of React.js.

I was using findDOMNode(reference) to grab a DOM element. This function is part of the new syntax introduced as of React v0.14 Beta 1. The version of React I am working with is v0.13.3 which still relies on the getDOMNode() function.

[dmatteo]

@saemchou actually 0.13 already uses React.findDOMNode(ref)
0.14 is only different in the sense it's using ReactDOM, like: ReactDOM.findDOMNode(ref)

[saemie]

Hi @dmatteo thank you for joining, there's still a lot for me to learn about React

I understood that findDOMNode() was introduced in 0.14 from the last paragraph of this blog post.
Also I'm getting the Uncaught TypeError: React.findDOMNode is not a function error with React v0.13.3.

I replicated this example to test the above using npm for dependency management and browserify to bundle everything. Could I be missing something?

EDIT: I got the Uncaught Error: Invariant Violation: Component (with keys: getDOMNode,_handleChange,props,context,state,refs,_reactInternalInstance) contains render method but is not mounted in the DOM error message when I started using ReactDOM alongside React to deal with dom elements as you described.

[dmatteo]

It's hard to know without seeing your code, but my best guess is that you're trying to access React.findDOMNode() on 0.14, which doesn't exist because it has been "moved" in ReactDOM.

Maybe it's easier for you to start with 0.13 before moving to 0.14 which has this implicit separation of the DOM functions?

[saemie]

@dmatteo yep, I got caught out by the separation of the DOM functions. I managed to get it working on 0.14 now.

I did try using react and react-dom on 0.14 before but still got the above error (I should have mentioned this). However I found that this was because I was still using React.render(<Mycomponent />, node) instead of the correct way ReactDOM.render(<Mycomponent />, node). I corrected this and everything is working now.

I will publish my code next time, I realise it would save a lot of time.

[dmatteo]

It usually helps :)
I'm glad you figured it out though.

[percyhanna]

For any who may happen to run across this same error in the future, I recently saw this error which was caused by calling getDOMNode() on a component that had been unmounted. This was caused by an asynchronous event that then assumed the component was still mounted. Although isMounted is considered an anti-pattern, this is one possible use case that I see it being very convenient for.

[gaearon]

@percyhanna Are you saying that you’ve had this error in 0.14.x despite a wording change in #4727? Can you provide a failing test? Thanks.

[percyhanna]

I was merely documenting the problem I ran into and its solution, since it seemed to be slightly different than the issues described above. This was on an app that hasn't gotten around to upgrading past 0.13.x yet.

[gaearon]

This was on an app that hasn't gotten around to upgrading past 0.13.x yet.

Got it, thanks. I was just worried we missed some case when adding a warning.