ReactJs 0.12 Target container is not a DOM element

Question

I am very confused as to why I am getting this error in the console. I have read all the dos and as far as I know I am doing this right.

On my page I have a

<div id="aisis-writer"></div>

where I want my react element tied to. I have then created a simple React component that renders nothing:

var AisisWriter = React.createClass({
  getInitialState: function(){},

  componentDidMount: function(){},

  render: function(){
    return null;
  }
});

React.render(
  <AisisWriter />,
  document.getElementById('aisis-writer')
);

Very basic. When I load the page I see: Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element. So I think, ok maybe I misspelled something here, so in the console I do:

document.getElementById('aisis-writer');

And I get back:

<div id="aisis-writer"></div>

So am I completely missing something? Why am I getting this error?

Where in your document is the code located? Probably a duplicate of http://stackoverflow.com/q/14028959/218196. — Felix Kling, Dec 12 '14 at 20:17
React.render should be invoked on window.onload or put the script tag with your react code after the asis-writer dom element — Furqan Zafar, Dec 12 '14 at 20:18
This is with in a rails project so I assume all Javascript code of the code to do this is loaded with in the header. Should I use a method to load this particular file AFTER my element? — SeekingTruth, Dec 12 '14 at 20:21

Timbergus · Answer 1 · 2015-11-25T12:26:24.600

I am having the same problem and it happens because the scripts are executed before having the DOM parsed (maybe you are including your scripts in your index head). To fix this, you can use defer in your script inclusion.

<head>
    ...
    <script src="app.js" defer></script>
    ...
</head>

The defer attribute loads your script when the page has finished parsing, so even if you place your scripts into your index head, you will be sure the script is going to find all your elements because they will be there.

W3Schools defer

Update

The standard way is adding your scripts at the end of the body. They should load after the DOM is created, so the error should disappear because when you reach the DOM with your JavaScript, it is already there. defer is widely spread among browsers so you shouldn't have problems unless you are working with really old ones. You can use deferin order to arrange your code. It seems more intuitive to have your "dependencies" inside the header and your "code" inside the body.

Here you have a reference of where to use defer.

score 1 · Answer 2 · answered Dec 13 '14 at 07:45

The following piece of code tries to find the element with ID aisis-writer where it says document.getElementById('aisis-writer') but it's not able to find that on the page.

React.render(
  <AisisWriter />,
  document.getElementById('aisis-writer')
);

This may happen because

JavaScript is executed before the line <div id="aisis-writer"></div>
Or, you might have mis-spelt ID

Solution:

Either you can place the React.render statements in window.onload
Or, make sure, React.render appears only after <div id="aisis-writer"></div> on the page

ReactJs 0.12 Target container is not a DOM element

2 Answers2

Linked