Home/ Questions/How to deal with the target container is not a dom element errors?
Next
Answered
Paul Guillemot
  • 22
Asked: 2022-05-12T12:14:33+00:00 In:

How to deal with the target container is not a dom element errors?

  • 22

. Advertisement .

..3..

. Advertisement .

..4..

This is the program I run:

import React from "react";
 import ReactDOM from "react-dom";
 
 class MainApp extends React.Component {
  render() {
  return (
  <div className="content">
  <h1>Hello World</h1>
  </div>
  );
  }
 }
 
 ReactDOM.render(<MainApp />, document.getElementById("app"));
<!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>
  <script src="./bundle.js"></script>
 </head>
 
 <body>
  <div id="app"></div>
 </body>
 
 </html>

After I run, it returns an error:

Uncaught Error: Target container is not a DOM element.
  at invariant (invariant.js:42)
  at legacyRenderSubtreeIntoContainer (react-dom.development.js:17116)
  at Object.render (react-dom.development.js:17195)
  at eval (index.jsx:48)
  at Object../client/src/index.jsx (bundle.js:97)
  at __webpack_require__ (bundle.js:20)
  at bundle.js:84
  at bundle.js:87
 invariant @ invariant.js:42

Does anyone have any suggestions for the problem below: target container is not a dom element in the javascript.

How to correct it?

target container
Share

1 Answer

  1. Best Answer

    The cause: You insert 

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

    in the location is wrong.

    The solution: Return it to the position in the tags, like this image.

    Before the container is initialized, you will need to insert your React script

    The code should be modified as follows:

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

Leave an answer

You must login to add an answer.

Need An Account,