React Error: Target Container is not a DOM Element

Asked
Active3 hr before
Viewed126 times

9 Answers

containerelementerrorreact
90%

I had encountered the same error with React version 16. This error comes when the Javascript that tries to render the React component is included before the static parent dom element in the html. Fix is same as the accepted answer, i.e. the JavaScript should get included only after the static parent dom element has been defined in the html.,For those that implemented react js in some part of the website and encounter this issue. Just add a condition to check if the element exist on that page before you render the react component.,Note that I am using django's load static files here. My javascript is a bit more complex, so I won't post it all here unless someone requests it, but the line with the error is this:

After reading this blog post I realized that the placement of this line:

<script src="{% static "build/react.js" %}"></script>
load more v
88%

The way you have it it runs before you even have DOM.,You should include it in the bottom like so:, Do satellites decrease the amount of solar radiation reaching Earth?

You should include it in the bottom like so:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>REACT TEST</title>
</head>

<body>
   <div id="app"></div>
   <script src="./bundle.js"></script>
</body>

</html>
load more v
72%

React throws the error, target container is not a dom element, when we include the build script before the root element. The solution is to always include the build scripts before body closing tag </body>.,This file will create target container is not a dom element error because our scripts are loaded before out root element.,I am Akash Mittal, an overall computer scientist. If you want to guest post, need help in your projects, want to advertise, Feel free to contact me at [email protected]

Suppose the html structure of index.html is –

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8" />
   <link rel="shortcut icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <link rel="manifest" href="/manifest.json" />
   <title>Error Template</title>
   <link href="/static/css/2.10306419.chunk.css" rel="stylesheet" />
   <link href="/static/css/main.1b589238.chunk.css" rel="stylesheet" />
   <script src="/static/js/2.537e346a.chunk.js"></script>
   <script src="/static/js/main.119c9f53.chunk.js"></script>
</head>

<body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
</body>

</html>
load more v
65%

There isn’t an element with the ID #root, I think you meant root – you’re using the function getElementById, IDs don’t have # at the start.,If that isn’t working, then there isn’t an element with the ID in the HTML,from my chrome inspect? … sorry if the question isn’t cool bit new in react

import React from 'react';

import ReactDOM from 'react-dom';

class App extends React.Component {

  constructor (props){

    super (props);

    this.state = {lat:null};

    window.navigator.geolocation.getCurrentPosition(

    position => {

      this.setstate({lat:position.coords.latitude});

    },

    err => console.log(err)

  );

  }

  render(){

  return <div>Latitude {this.state.lat}</div>

  }

}

ReactDOM.render(

   <App />, document.getElementById('#root'));
load more v
75%

Your code so far


class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        {/* change code below this line */}
        <Fruits />
        <Vegetables />
      
        {/* change code above this line */}
      </div>
    );
  }
};

// change code below this line
ReactDOM.render(<TypesOfFood />, 'challenge-node');
load more v
40%

Hello, When using ReacDOM inside a package it throws, Hello I've been having this issue with React, I need someone to help out or I will just go and create a new React app. Thank you,Can you post an entire app that exhibits this? There are some code snippets in your SO question, but they don't seem to explain why the behavior is happening.

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
load more v
22%

I am getting this error since upgrading from 3.2.18 to 3.3.3:,I got the same error : Target container is not a DOM element.,@ndelangen I'm also getting this exact error using a custom webpack config since upgrading to 3.3.

Uncaught Error: Target container is not a DOM element.
at invariant (invariant.js:42)
at renderSubtreeIntoContainer (react-dom.development.js:15180)
at Object.render (react-dom.development.js:15290)
at exports.default (routes.js:39)
at App.init (app.js:119)
at exports.default (index.js:41)
at Object.<anonymous> (index.js:16)
   at __webpack_require__ (bootstrap 77c5cb83d0653d7a60e4:678)
   at fn (bootstrap 77c5cb83d0653d7a60e4:88)
   at Object.defineProperty.value (fuse.js:996)
load more v
60%

and a css file index.css:,You're using getElementById so you need id="app" not class="app", right now there is nothing with an id of "app"

I am learning the VERY basics of how webpack + babel works together to create a bundle and have been running into a problem where I get the following console error and none of my jsx components are rendered:

Error: Target container is not a DOM element.
load more v
48%

 Pretag team - issue, fix, solve, resolve

Other "container-element" queries related to "React Error: Target Container is not a DOM Element"