53

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.

3 Answers 3

68

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').
Sign up to request clarification or add additional context in comments.

7 Comments

Help man, now I got this error: Uncaught Error: Invariant Violation: findDOMNode was called on an unmounted component.
Perhaps ReactDOM.render?
It might be better to separate it into another question (with a link). This question has gotten a little too cluttered.
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
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.
|
3

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

Comments

1

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.