Invariant violation: target container is not a DOM element when the element is in the DOM
So, I have a response app using Backbone router, but when I try to navigate to DOMContentLoaded
, I get:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
I tried to go through the stack trace but can't figure out what's going on as the method that throws the error ( ReactMount._registerComponent
) gets hit multiple times, the first couple of which doesn't throw an error since the DOM element exists. I am using the components that I have used in other projects, no problem, and stripped all the parts down to the bare 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 router code:
AppRouter.prototype.signIn = function () {
var container = document.getElementById( 'app-container' );
React.render(
<LoginForm />,
container
);
};
LoginForm element:
var LoginForm = React.createClass({
render: function () {
return(
React.render(
<div id="login-form-component">
</div>
)
);
},
});
The route hit, LoginForm#render
hit as expected - what am I missing?
Here is the stack trace, the bottom of which is my router input 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!
source to share
The error actually comes from here in LoginForm # render:
return(
React.render(
<div id="login-form-component">
</div>
)
);
It should be
return(
<div id="login-form-component">
</div>
);
The render function should return virtual dom nodes, not mount them. You are specifically getting the error because you are calling React.render with one argument.
source to share
You can also get this error if the target div id in React.render has a spelling error. If your index.html contains
<div id="foo"/>
while the render call
React.render(React.createElement(App, null), document.getElementById("bar"));
then no DOM element is added to the Target container (note bar id instead of foo ).
source to share