CODEWITHSUNDEEP
reactjsreact-dom
jlips
jlips

Reputation: 1

Import ReactDOM undefined,

Error received

I am following a Scrimba Tutorial on React with Bob Ziroll, and I have gotten to the point where I have to set up a local environment for React. I had no issues with installing via npm but I now receive the following error:

Uncaught ReferenceError: ReactDOM is not defined js index.js:52 factory react refresh:6

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <main id="root"></main>
   
        <script src="index.js" type="module"></script>
    </body>
</html>

    import React from "react"
    import ReactDOM from "react-dom"
    import TheHeader from "./header.js"
    import TheFooter from "./footer.js"
    import TheList from "./list.js"
    //import TheHeader from ./header
    
    function ThePage(){
        return(
            <div>
            <TheHeader />
            <TheList />
            <TheFooter />
            </div>
        )
    }
    ReactDOM.render(<ThePage />, document.getElementById("root"));

If I remove type="module" from my script tag I get the following Error:

Uncaught SyntaxError: import declarations may only appear at top level of a module

The contents of my additional imports all start with the following:

import React from "react"
export default function TheFooter(){...

I tried reinstalling react&react-dom via npx but it doesn't seem to fix anything?

I appreciate your responses and thanks for helping me out.

edit, Package.JSON:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Upvotes: 0

Views: 1702

Answers (2)

Khaled
Khaled

Reputation: 1

Your code was just fine: a couple of things to take care I stated them below: try to change the: <main id="root"></main>) to (<div id="root"></div> also, you just can import the (ReactDOM) normally doing

import ReactDOM from 'react-dom'

and use the

ReactDOM.render({...})

enter image description here I have attached a picture so that you see that your code is working just fine

Good luck in your learning ;)

Upvotes: 0

Shambhu Sahu
Shambhu Sahu

Reputation: 341

You have to import the render method from react-dom, not the ReactDOM itself.

import {render} from "react-dom"; and then use it to render your root element

and you should always return the single root node from the component you can wrap you component useing div or react fragment to achieve that like this

 import React from "react"
    import {render} from "react-dom";
    import TheHeader from "./header.js"
    import TheFooter from "./footer.js"
    import TheList from "./list.js"
    //import TheHeader from ./header
    
    function ThePage(){
        return(
            <>
            <div>
            <TheHeader />
            <TheList />
            <TheFooter />
            </div>
            </>
        )
    }
    render(<ThePage />, document.getElementById("root"));

Upvotes: 1

Related Questions