Invariant Violation: Target container is not a DOM element, when element is in the DOM

Question

So I have a react app using the Backbone router, yet when I try to navigate on DOMContentLoaded, I get:

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

I have tried stepping through the stack trace, but can't figure out what is going on, as the method that throws the error (ReactMount._registerComponent) is hit a several times, the first couple of which do not throw the error, as the DOM element in question is there. I am using components I have used in other projects, without issue, and have stripped all pieces down to the minimum to debug this (unsuccessfully so far):

DOM structure:

<html>
    <head>
    </head>
    <body>
        <div id="app-container">
        </div>
        <script src="http://fb.me/react-with-addons-0.12.0.js"></script>
        <script type="text/javascript" src="js/application.js"></script>
    </body>
</html>

with the router code:

AppRouter.prototype.signIn = function () {
  var container = document.getElementById( 'app-container' );

  React.render(
    <LoginForm />,
    container
  );
};

LoginForm component:

var LoginForm = React.createClass({
  render: function () {
    return(
      React.render(
        <div id="login-form-component">
        </div>
      )
    );
  },
});

The route is hit, LoginForm#render is hit as expected -- what am I missing?

Here is the stack trace, the bottom of which is my router signin method:

invariant 
ReactMount._registerComponent 
(anonymous function) 
ReactPerf.measure.wrapper 
ReactMount.render 
ReactPerf.measure.wrapper 
React.createClass.render 
(anonymous function) 
ReactPerf.measure.wrapper
(anonymous function)
ReactPerf.measure.wrapper
ReactComponent.Mixin._mountComponentIntoNode
Mixin.perform 
ReactComponent.Mixin.mountComponentIntoNode
(anonymous function)
ReactPerf.measure.wrapper
ReactMount.render 
ReactPerf.measure.wrapper
AppRouter.signin

Thanks for reading!

Put `console.log(document.getElementById( 'app-container' ))` in .signIn, just to check. 99% of the time it means you're passing undefined or null as the second argument. — Brigand, Nov 08 '14 at 18:24
I checked that after reading similar questions on SO, and the element is present :) — mattmattmatt, Nov 08 '14 at 18:31

score 6 · Answer 1 · answered Feb 16 '15 at 20:36

You may also get this error if the target div id in React.render is misspelled. If your index.html contains

<div id="foo"/>

while the render call is

React.render(React.createElement(App, null), document.getElementById("bar"));

then Target container is not a DOM element is thrown (note bar id instead of foo).

score 4 · Accepted Answer · answered Nov 08 '14 at 18:34

4

The error is actually coming from here in LoginForm#render:

return(
  React.render(
    <div id="login-form-component">
    </div>
  )
);

That should be

return(
    <div id="login-form-component">
    </div>
);

The render function should return the virtual dom nodes, not mount them. You specifically get the error because you're calling React.render with one argument.

answered Nov 08 '14 at 18:34

Brigand

84,529
20
165
173

Well...whoops haha. I originally wasn't going to use `JSX` in the project and then when I decided to switch back, I guess I missed that entirely... I only feel a little stupid haha. Thanks so much! – mattmattmatt Nov 08 '14 at 18:41

Invariant Violation: Target container is not a DOM element, when element is in the DOM

2 Answers2