javascript - 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 ponents 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=".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 ponent:

var LoginForm = React.createClass({
  render: function () {
    return(
      React.render(
        <div id="login-form-ponent">
        </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!

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.

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 ponent:

var LoginForm = React.createClass({
  render: function () {
    return(
      React.render(
        <div id="login-form-ponent">
        </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!

Share Improve this question asked Nov 8, 2014 at 18:06 mattmattmatt 9653 gold badges15 silver badges29 bronze badges

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 Commented Nov 8, 2014 at 18:24
I checked that after reading similar questions on SO, and the element is present :) – mattmattmatt Commented Nov 8, 2014 at 18:31

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

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

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

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

That should be

return(
    <div id="login-form-ponent">
    </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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Invariant Violation: Target container is not a DOM element, when element is in the DOM - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)