''ReactDOM' is not defined no-undef

index.js is as follows:

import './index.css';
import { render } from "react-dom";
const { React } = require('react');
const { App } = require('./App');
const { serviceWorker } = require('./serviceWorker');


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


serviceWorker.unregister();

and app.jsx is as follows:

import React from "react";
import"./App.scss";
import { Login, Register } from "./components/login/index";


export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoginActive : true
    };
  }

  componentDidMount() {
    this.rightSide.classList.add("right");
  }

  changeState() {
    const { isLoginActive } = this.state;

    if (isLoginActive) {
      this.rightSide.classList.remove("right");
      this.rightSide.classList.add("left");
    }else{
      this.rightSide.classList.remove("left");
      this.rightSide.classList.add("right");
    }
    this.setState(prevState => ({
       isLoginActive: !prevState.isLoginActive 
    }));
  }


  render() {
    const { isLoginActive } = this.state;
    const current = isLoginActive ? "Register" : "Login";
    const currentActive = isLoginActive ? "Login" : "Register";

    return (
      <div className="App">
        <div className = "login">
          <div className = "container" ref={ref => (this.container = ref)}>
            {isLoginActive && (
              <Login containerRef={ref => (this.current = ref)} />
            )}
            {!isLoginActive && (
              <Register containerRef={ref => {this.current = ref}} />
            )}
          </div>
          <RightSide
            current={current}
            currentActive={currentActive}
            containerRef={ref => (this.rightSide = ref)}
            onClick={this.changeState.bind(this)}
            />
        </div>
      </div>
    );
  }
}


const RightSide = props => {
  return (
    <div
      className = "right-side"
      ref={props.containerRef}
      onClick={props.onClick}
    >
      <div className="inner-container">
        <div className="text">{props.current}</div>
      </div>
    </div>
  );
};



export default App;

on "npm start" I get the following error:

Failed to Compile src\index.js Line 14:1: 'ReactDOM' is not defined no-undef

Search for the keywords to learn more about each error.

my React and ReactDOM are up to date and compatible. I am unable to figure out the solution to this issue. Any kind of assistance would be appreciated. Thanks!!

reactjs react-dom

Solution 1:^[1]

You have to correct the import statement of react-dom like below.

import ReactDOM from "react-dom";

Solution 2:^[2]

you have to import it:

https://reactjs.org/docs/react-dom.html

import ReactDOM from 'react-dom'

Solution 3:^[3]

Check for typo. I got the same error, it was because of the difference between ReactDom and ReactDOM.

import ReactDom from 'react-dom'; ReactDOM.render

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	vishwas meshram
Solution 2	Noriller
Solution 3	Sebastien

''ReactDOM' is not defined no-undef

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]