skip to Main Content

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.

2

Answers


  1. Chosen as BEST ANSWER

    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.


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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search