• Register
0 votes
366 views

Problem :

I often face below error after making the trivial React example page:

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

Below is my code:

/** The @jsx React.DOM */
'use strict';
var MyReact = require('react');
var MyApp = MyReact.createClass({
  render() {
    return <h1>Yo</h1>;
  }
});
MyReact.renderComponent(<App />, document.body);

 

Below is my HTML:

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

What does the above error mean?

6 5 3
7,540 points

Please log in or register to answer this question.

2 Answers

0 votes

Solution :

By the time your script is executed, the document element is not available yet, as script itself is in your head. While it is the valid solution to keep the script in your head and render on the DOMContentLoaded event, it is even better to put the script at a very bottom of a body and render root component to the div before it like below:

<html>

<head>

</head>

<body>

  <div id="root"></div>

  <script src="/mybundle.js"></script>

</body>

</html>

 

and in your mybundle.js, please call:

MyReact.render(<App />, document.getElementById('root'));

You must always render to the nested div instead of the body. Otherwise, all the sorts of third-party code can modify your body DOM node when the React doesn't expect it, and cause the weird errors that are extreamly hard to trace and debug. 

The React.render is deprecated, use the ReactDOM.render instead.

Example:

import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));

9 7 4
38,600 points
0 votes

Solution:

By the time script is executed, document element is not available yet, because script itself is in the head. While it's a valid solution to keep script in head and render on DOMContentLoaded event, it's even better to put your script at the very bottom of the body and render root component to a div before it like this:

Code:

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

and in the 

bundle.js

Call

React.render(<App />, document.getElementById('root'));

You should always render to a nested div instead of body. Otherwise, all sorts of third-party code (Google Font Loader, browser plugins, whatever) can modify the body DOM node when React doesn't expect it, and cause weird errors that are very hard to trace and debug.

The nice thing about putting script at the bottom is that it won't block rendering until script load in case you add React server rendering to your project.

More Specifically /imdex.html

<!doctype html>
<html>
  <head>
    <title>My Application</title>
    <!-- load application bundle asynchronously -->
    <script async src="/app.js"></script>
    <style type="text/css">
      /* pre-rendered critical path CSS (see isomorphic-style-loader) */
    </style>
  </head>
  <body>
    <div id="app">
      <!-- pre-rendered markup of your JavaScript app (see isomorphic apps) -->
    </div>
  </body>
</html>

 

/app.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

function run() {
  ReactDOM.render(<App />, document.getElementById('app'));
}

const loadedStates = ['complete', 'loaded', 'interactive'];

if (loadedStates.includes(document.readyState) && document.body) {
  run();
} else {
  window.addEventListener('DOMContentLoaded', run, false);
}

 

N.B: Having 

<script async src="..."></script> 

in the header ensures that the browser will start downloading JavaScript bundle before HTML content is loaded

10 6 4
31,120 points

Related questions

0 votes
1 answer 4 views
4 views
Problem: Can anyone tell me the solution of it? .. invariant violation: target container is not a dom element.
asked Apr 2 Ifra 24.4k points
1 vote
1 answer 11 views
11 views
Problem : I'm currently facing a problem with React.All I find in component lifecycle is componentWillUnmount which gets called before the component is removed from DOM. Is there any way to achieve this with React ? In plain javascript ? I need to know when and how a component is removed from DOM.
asked Mar 6 Shovo210 14k points
0 votes
1 answer 3 views
3 views
Problem: When I run yarn run start or yarn run build, Webpack reports to have built the bundle fine. When I run the application in the browser, I get the Uncaught ReferenceError: React is not defined error. Please help me solving this error.
asked 3 days ago anika11 5.1k points
0 votes
1 answer 2 views
2 views
Problem: As I mentioned in my previous query, I'm having difficulties with my learning; I've tried searching the web but haven't been able to find adequate information; could you assist me in continuing my project?
asked Mar 30 tuhin1 48.9k points
0 votes
1 answer 17 views
17 views
What are the possible ways to target Html elements like (h1 ,p a,) tags with javascript file(App.js) Is there anyone who can guide me?
asked Nov 10, 2020 Han Li 710 points
0 votes
1 answer 61 views
61 views
Problem : I have written two different types of sticky menus for two different pages. Following is the error Inside the anonymous function, use jquery to select the footer div. it has an id of 'footer'. Following is the code for both Menus. $(document).ready(function () { ... the bottom doesn't work because the second line of code var contentNav = $('.content-nav').offset().top; fires a error .
asked Nov 19, 2019 peterlaw 6.9k points
1 vote
1 answer 39 views
39 views
Problem : i'm using React router v^4.0.0, I've been having some trouble with react router. Router.js:43 Uncaught TypeError: Cannot read property 'location' of undefined at new Router (Router.js:43) at ReactCompositeComponent.js:295 at measureLifeCyclePerf ( ... .mountComponent (ReactReconciler.js:46) Any ideas on what I need to do to fix this? Thanks for your patience and help!!
asked Mar 21 Shovo210 14k points
1 vote
1 answer 20 views
20 views
Problem : I'm using React with ES7.I type anything in the input box of AuthorForm and I'm getting this error : Uncaught TypeError: Cannot read property 'state' of undefined HELP! I need help understanding this error. Thank you in Advance!
asked Mar 20 Shovo210 14k points
1 vote
1 answer 5 views
5 views
Problem : I am new in javascript . When I binding delta in the constructor , I am getting the following error: Uncaught TypeError: Cannot read property 'setState' of undefined Code : class Counter extends React.Component { constructor(props) { super(props); this.state = { count : 1 }; ... >{this.state.count}</h1> <button onClick={this.delta}>+</button> </div> ); } } How to fix this error. Thanks!
asked Mar 20 Shovo210 14k points
1 vote
1 answer 16 views
16 views
Problem: Please help me. How can I solve it? uncaught error: graph container element not found
asked Mar 16 MUHAMMAD MUNEEB 83k points