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!
The error is actually coming from here in LoginForm#render:
That should be
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.