React error in index.js, "Uncaught ReferenceError: dom is not defined"

I'm building a React App,
I'm using Babel and Webpack as module bundler.

While writing the index.js the Application started sending me an error about the dom that is not defined,
but actually I've imported the "react-dom" library as the documentation has proposed to do.
Below I share the code, please help me.

package.json

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.22.6",
    "@babel/core": "^7.22.6",
    "@babel/preset-env": "^7.22.6",
    "@babel/preset-react": "^7.22.5",
    "autoprefixer": "10.4.5",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.8.1",
    "html-webpack-plugin": "^5.5.3",
    "style-loader": "^3.3.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

const myFirstElement = <h1>Hello React!</h1>

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);

I've tryed to install two times the library and installed the other one so called "react-router-dom".
I made a simpler index.js that doesn't render the <App/> from App.js, but It still does not work.

I'm expecting to see the projects running without problems.

Your ReactDom import statement seems to be the issue. Instead of importing ReactDom from "react-dom/client"; import it from "react-dom";. Please let me know if the change worked if/when you make the change.

In order to solve this problem I've asked for help online, after many hours of researching the issue was found inside the bable file that was bad created.