Categories
django dom javascript reactjs

React Error: Target Container is not a DOM Element

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://<url>/react-0.11.2.js"></script>
<!-- <script src="http://<url>/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.) This is the line with the error:

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?

I figured it out!

After reading this blog post I realized that the placement of this line:

<script src="https://www.faqcode4u.com/faq/135144/{% static"build/react.js" %}"></script>

was wrong. That line needs to be the last line in the <body> section, right before the </body> tag. Moving the line down solves the problem.

My explanation for this is that react was looking for the id in between the <head> tags, instead of in the <body> tags. Because of this it couldn’t find the content id, and thus it wasn’t a real DOM element.