ReactJS findDOMNode and getDOMNode are not functions

Question

I'm building a web-app with ReactJS and Flux and I'm trying to get the node of my current div using the method findDOMNode and I get the next error:

Uncaught TypeError: React.findDOMNode is not a function

So, I tried to use getDOMNode and I get the very same error:

Uncaught TypeError: React.getDOMNode is not a function

I'm using npm to build the JS, the code where I use these methods:

var React = require('react');
var stores = require('../stores');
var MessagesUserContainer = require('./messageusercontainer');
var ChatStore = stores.ChatStore;
var owner = stores.getOwner();

var MessagesList = React.createClass({

    getInitialState: function(){
        return {'muc': []};
    },
    componentDidUpdate: function(){
        var node = React.findDOMNode(this); //Error here
        node.scrollTop = node.scrollHeight;
    },
    render: function(){
        return (
                <div className="chatScroll">
                    {this.state.muc}
                </div>
            )
    }
});

module.exports = MessagesList;

ReactJS verion: 0.14.0

EDIT

As pointed out in the answers, the DOM library as of v0.14.0 is out of the React core, so I made a few changes to my code:

var React = require('react');
var ReactDOM = require('react-dom');
var stores = require('../stores');
var MessagesUserContainer = require('./messageusercontainer');
var ChatStore = stores.ChatStore;
var owner = stores.getOwner();

var MessagesList = React.createClass({

    getInitialState: function(){
        return {'muc': []};
    },
    componentDidUpdate: function(){
        var node = ReactDOM.findDOMNode(this);
        node.scrollTop = node.scrollHeight;
    },
    render: function(){
        return (
                <div className="chatScroll">
                    {this.state.muc}
                </div>
            )
    }
});

module.exports = MessagesList;

But I got another problem:

Uncaught Error: Invariant Violation: findDOMNode was called on an unmounted component.

Downswing

Answer 1

Changed in latest React:

ReactDOM.findDOMNode

https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode

It is in the react-dom package. Note that ReactDOMServer has also been moved into another package. Probably in preparation for React related platform-specific APIs (such as React native).

To import/ require the package:

import ReactDOM from "react-dom";

or

 var ReactDOM = require('react-dom').

Exponible

Thank you, I didn't know they created a new package. – Downswing

Help man, now I got this error: Uncaught Error: Invariant Violation: findDOMNode was called on an unmounted component. – Downswing

Perhaps ReactDOM.render? – Exponible

It might be better to separate it into another question (with a link). This question has gotten a little too cluttered. – Exponible

Also check your code and see if you are using "React.render" anywhere. I suspect you are using React.render(<component/>,el) somewhere. render() has been moved to ReactDOM – Exponible

I'd like to emphasize that the first word is ReactDOM instead of React. I was only focusing on the function name, and didn't notice that the package name is the one which was changed. – Centrosymmetric

Not working for me like all other mid level methodology , i got TypeError: undefined is not an object (evaluating 'react_dom_1.default.findDOMNode') , TS no logs err msg. – Pawn

Doesn't allow you to set the node like getDomNode – Illinois

Answer 2

In react v0.14 DOM library has been moved from React.js itself. There are some BC changes, but if you wrote your code in a proper way then changes won't be painful. Please read here for full overview: https://facebook.github.io/react/blog/#major-changes

Shelashelagh

Answer 3

As of React 18, ReactDOM should be imported from react-dom/client while the findDOMNode export is considered deprecated and still exported from react-dom.

Therefore:

import {findDOMNode} from 'react-dom';
import ReactDOM from 'react-dom/client';

Update: Adding findDOMNode documentation link

Fitts