Question 401178 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – ReactDOMClient is not defined

I am trying to get started with ReactJS and I have watched a beginners Pluralsight course. I seem to be falling at the first hurdle followin what the tutor is doing. Here is my HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple React app no JSS</title>
    <script src="index.js" ></script>
    <script type="module">
        import React from
        "https://esm.sh/[email protected]/?dev"

        import ReactDOMClient from
        "https://esm.sh/[email protected]/client/?dev"
    </script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

Here is my Javascript (index.js):

window.onload = () => {
    const rootElement=document.getElementById("root");
    const root = ReactDOMClient.createRoot(rootElement);
    const ints = [1,2,3]
    const childrenElements = [];
    childrenElements.push(
        React.createElement("li", { key:ints[0] }, ints[0])
    );
    childrenElements.push(
        React.createElement("li", { key:ints[1] }, ints[1])
    );
    childrenElements.push(
        React.createElement("li", { key:ints[2] }, ints[2])
    );
    root.render(childrenElements);
}

Nothing is displayed, which is not the case for the tutor. If I inspect console after pressing F12, then I see this:

enter image description here

If I manually browse (using a web browser) to https://esm.sh/[email protected]/?dev or https://esm.sh/[email protected]/client/?dev then I see content so I beliece they are valid.

Tags:

2

Answers


  1. 0

    The window.onload runs before the module is loaded.

    Easiest way to get this working is to move you onload to a script with type module at the end of your body so it’s called after everything has loaded

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple React app no JSS</title>
       
    <script type="module">
      import React from "https://esm.sh/[email protected]/?dev"
      import ReactDOMClient from "https://esm.sh/[email protected]/client/?dev"
  
      window.React = React;
      window.ReactDOMClient = ReactDOMClient;
    </script>
</head>

<body>
    <div id="root"></div>
    <script type="module">
        const rootElement=document.getElementById("root");
        const root = ReactDOMClient.createRoot(rootElement);
        const ints = [1,2,3]
        const childrenElements = [];
        childrenElements.push(
            React.createElement("li", { key:ints[0] }, ints[0])
        );
        childrenElements.push(
            React.createElement("li", { key:ints[1] }, ints[1])
        );
        childrenElements.push(
            React.createElement("li", { key:ints[2] }, ints[2])
        );
        root.render(childrenElements);
    </script>
</body>
    Login or Signup to reply.
  2. 0

    you can import React and ReactDOMClient directly to index.js
    Don’t forget to set type="module" for
    <script type="module" src="index.js" ></script>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search