How do I fix this unknown TypeError when rendering my page?

Question

So I am building this react app and when I serve it on my local server i get this error in my console: Uncaught TypeError:

react__WEBPACK_IMPORTED_MODULE_0___default(...).render is not a function
    at ./src/index.js (index.js:6:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:7:1
    at startup:7:1

my index.js file has the following code:

import React from "react";
import ReactDOM from "react";
import App from "./App";


ReactDOM.render(<App />, document.getElementById('root'))

and the code for my app.js file:

function App() {
    return <h1>Hello from the app component</h1>
}

export default App

I do not understand why I am getting this error. Can someone please help me figure this out.

Answer 1

The default export of the 'react' module is React. To get ReactDOM, you need to import from react-dom .

import ReactDOM from "react";

should change to

import ReactDOM from 'react-dom';

You should also consider if you're using React 18 , in which case you should use .createRoot instead.

ReactDOM.createRoot(document.querySelector('#root')).render(<App />);