Invariant Violation: Target container is not a DOM element, when element is in the DOM
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!
Answer
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).