[SOLVED] react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function show in the console of localhost:3000

react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function show in the console of localhost:3000

after I created react.js project when I put any type of code it doesn't show in the localhost so when i inspect and open the console tap it show me this error: Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function

at Module../src/index.js (index.js:7:1)
at Module.options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at startup:7:1
at startup:7:1

Solution

The above used method is now deprecated for newer import methods in the React 18.

You can use this to solve the problem.

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';

import App from './App'

// This is the ID of the div in your index.html file

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ if you use TypeScript, add non-null (!) assertion operator
const root = createRoot(rootElement!);

Then, finally:

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);