• Register
0 votes
230 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

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 34 views
34 views
Problem : I just launched my site and don't effectively do anything for a couple of seconds, and afterward the below indicated error message is produced in devTools. In the event that some procedure is done, the error doesn't emerge Service Worker termination by a timeout timer was ... Configuration: OS:- Windows 10 Pro webpack:- 1.14.0 sw-precache-webpack-plugin:- 0.9.1 sw-precache:- 5.0.0
asked Nov 29, 2019 alecxe 7.5k points
0 votes
1 answer 35 views
35 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
0 votes
1 answer 818 views
818 views
Problem : I am using the reactjs. When I try to run my code the browser says as below: Uncaught TypeError: Super expression must either be null or a function, not undefined The line used to compile my code: browserify -t reactify -t babelify examples/temp.jsx -o examples/public ... Component { render() { return <div>Hello World !! </div>; } } Does anyone have any idea on the solution for my issue?
asked Dec 7, 2019 alecxe 7.5k points
0 votes
1 answer 1.6K views
1.6K views
Problem : Facing following strange issue input is a void element tag and must neither have `children` nor use `dangerouslysetinnerhtml`.
asked Nov 13, 2019 peterlaw 6.9k points
1 vote
1 answer 34 views
34 views
Problem : I am very new to ruby-on-rails and reactjs. I have recently joined a new project. If I try to iterate through my variable mybadges and try to display each badge then I face below error : Each child in an array or iterator should have a unique "key" prop. ... error but was unable to fix it. So now I am looking for ruby-on-rails and reactjs expert who can help me in fixing above error.
asked May 4 stewart 4k points