Source:  Twitter logo

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!

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).

6 users liked answer #0dislike answer #06
mp31415 profile pic
mp31415

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.

4 users liked answer #1dislike answer #14
Brigand profile pic
Brigand

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).