javascripthtmlreactjsdomreact-dom

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.

Solution

  • 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.