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 ponent that renders nothing:
var AisisWriter = React.createClass({
getInitialState: function(){},
ponentDidMount: 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 pletely missing something? Why am I getting this error?
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 ponent that renders nothing:
var AisisWriter = React.createClass({
getInitialState: function(){},
ponentDidMount: 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 pletely missing something? Why am I getting this error?
Share Improve this question asked Dec 12, 2014 at 20:12 SeekingTruthSeekingTruth 1,0543 gold badges15 silver badges23 bronze badges 4- Where in your document is the code located? Probably a duplicate of stackoverflow./q/14028959/218196. – Felix Kling Commented Dec 12, 2014 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 Commented Dec 12, 2014 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 Commented Dec 12, 2014 at 20:21
- 1 Yes, you can only get a reference to elements that exist. – Felix Kling Commented Dec 12, 2014 at 20:21
2 Answers
Reset to default 6I 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.
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.renderstatements inwindow.onload - Or, make sure,
React.renderappears only after<div id="aisis-writer"></div>on the page