Import ReactDOM undefined,

Question

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"
    ]
  }
}

Shambhu Sahu · Accepted Answer · 2022-03-14 03:01:41Z

1

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"));

answered Mar 14, 2022 at 3:01

Shambhu Sahu

3412 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jlips Over a year ago

HI Shambhu, I am still receiving the same error when I implement your changes.

jlips Over a year ago

Hi, I have solved the issue. My code editor was exporting to the wrong location.... Oof. Thank you again Shambhu.

Khaled · Accepted Answer · 2022-04-10 21:12:11Z

0

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 ;)

answered Apr 10, 2022 at 21:12

Khaled

12 bronze badges

Collectives™ on Stack Overflow

Import ReactDOM undefined,

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related