Uncaught Error: Target container is not a DOM element. VSCode Live Server

I am using VSCode live server, and react & react-dom(both version 17) for my project.

My html code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>React Tutorial</title>
    </head>
    <body>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
        <script type="text/babel" src="./index.js"></script>
    </body>
</html>

My index.js:https://codepen.io/gaearon/pen/gWWZgR?editors=0010
I tried placing <script> at the bottom of <body>, but it keeps throwing this error:

Uncaught Error: Target container is not a DOM element.

Answer

You need to add root div in your index.html. By looking at the code of index.js,

ReactDOM.render(<Game />, document.getElementById("root"));

You are trying to mount the react app on a div with id=’root’ which does not exist in the index.html file and thats why the error Uncaught Error: Target container is not a DOM element. VSCode Live Server since the element doesn’t exists.

Add <div id='root'></div> to your index.html body.