Error Invariant Violation registerComponent Target container is not a DOM element

0 votes

I get this error after a making trivial React example page:

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

Here's my code:

/** @jsx React.DOM */
'use strict';

var React = require('react');

var App = React.createClass({
  render() {
    return <h1>Yo</h1>;
  }
});

React.renderComponent(<App />, document.body);
HTML:

<html>
<head>
  <script src="/bundle.js"></script>
</head>
<body>
</body>
</html>

How to fix this error?

Jun 8, 2020 in Java-Script by kartik
• 37,500 points
1,727 views

1 answer to this question.

0 votes

Hii @kartik,

Basically what you done is right, except you forget that JavaScript is sync in many cases, so you running the code before your DOM gets loaded, there are few ways to solve this:

1) Check to see if DOM fully loaded, then do whatever you want, you can listen to DOMContentLoaded for example:

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>


2) Very common way is adding the script tag to the bottom of your document (after body tag):

<html>
  <head>
  </head>
  <body>
  </body>
  <script src="/bundle.js"></script>
</html>


3) Using window.onload, which gets fired when the entire page loaded(img, etc)

window.addEventListener("load", function() {
  console.log("Everything is loaded");
});

4) Using document.onload, which gets fired when the DOM is ready:

document.addEventListener("load", function() {
  console.log("DOM is ready");
});

There are even more options to check if DOM is ready, but the short answer is DO NOT run any script before you make sure your DOM is ready in every cases.

answered Jun 8, 2020 by Niroj
• 82,740 points

Related Questions In Java-Script

0 votes
1 answer

Error:Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers

Hello @kartik, Access-Control-Allow-Headers does not allow * as accepted value. Instead of ...READ MORE

answered Jul 6, 2020 in Java-Script by Niroj
• 82,740 points
935 views
0 votes
1 answer

How to check if a specific key is present in a hash or not?

Hello @kartik, While Hash#has_key? gets the job done, as it has ...READ MORE

answered Jul 24, 2020 in Java-Script by Niroj
• 82,740 points
1,846 views
0 votes
1 answer

How to test if a string is JSON or not?

Hello @kartik, Use JSON.parse function isJson(str) { ...READ MORE

answered Oct 8, 2020 in Java-Script by anonymous
• 82,740 points
1,972 views
0 votes
0 answers
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,740 points
14,619 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,740 points
1,650 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,740 points
1,368 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,740 points
19,799 views
0 votes
1 answer

Error:Origin is not allowed by Access-Control-Allow-Origin

Hello @kartik, The easiest way to handle this ...READ MORE

answered Jun 18, 2020 in Java-Script by Niroj
• 82,740 points
2,380 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP