React Error: Target Container is not a DOM Element

by

I just got started using React so this is probably a very simple mistake, but here we go. My html code is very simple:

<!-- base.html -->
<html>
  <head>
    <title>Note Cards</title>
    <script src="http://fb.me/react-0.11.2.js"></script>
<!--     <script src="http://fb.me/JSXTransformer-0.11.2.js"></script> -->
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
    <script src="{% static "build/react.js" %}"></script>
  </head>
  <body>
    <h1 id="content">Note Cards</h1>
    <div class="gotcha"></div>
  </body>
</html>

Note that I am using django’s load static files here. My javascript is a bit more complex, so I won’t post it all here unless someone requests it, but the line with the error is this:

React.renderComponent(
  CardBox({url: "/cards/?format=json", pollInterval: 2000}),
  document.getElementById("content")
);

After which I get the ‘target container is not a DOM element error’ yet it seems that document.getElementById(“content”) is almost certainly a DOM element.

I looked at this stackoverflow post, but it didn’t seem to help in my situation.

Anyone have any idea why I’d be getting that error?

66 thoughts on “React Error: Target Container is not a DOM Element”

Leave a Comment