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,490 points
1,055 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,560 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,560 points
354 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,560 points
501 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,560 points
333 views
0 votes
1 answer

Jest SecurityError: localStorage is not available for opaque origins

Hello kartik, You must specify what environment (--env) ...READ MORE

answered Apr 24, 2020 in Java-Script by Niroj
• 82,560 points
464 views
+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,560 points
5,547 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,560 points
641 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,560 points
490 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,560 points
6,134 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 17, 2020 in Java-Script by Niroj
• 82,560 points
289 views