Reference error in console after rendering a react component

442 Views Asked by At

Getting this Uncaught Reference error in console after rendering my react component which is like this :

react-dom.production.min.js:216 ReferenceError: H is not defined
at App.render (webpack://frontend/./src/components/App.js?:21:149)
at qi (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:187:188)
at pi (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:186:173)
at ck (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:269:427)
at bk (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:250:347)
at ak (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:250:278)
at Tj (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:250:138)
at Lj (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:243:163)
at Jg (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:237:175)
at lk (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:285:27)
Ni @ react-dom.production.min.js:216
react-dom.production.min.js:260 Uncaught ReferenceError: H is not defined
    at App.render (webpack://frontend/./src/components/App.js?:21:149)
    at qi (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:187:188)
    at pi (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:186:173)
    at ck (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:269:427)
    at bk (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:250:347)
    at ak (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:250:278)
    at Tj (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:250:138)
    at Lj (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:243:163)
    at Jg (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:237:175)
    at lk (webpack://frontend/./node_modules/react-dom/cjs/react-dom.production.min.js?:285:27)

This is what I get in my console. What should I do to resolve this error? please let me know This is my App.js :

import React, { Component } from "react";
import { render } from "react-dom";
import PlansService from "./PlansService";
import HomePage from "./HomePage";
import RegisterForm from "./RegisterForm";

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <HomePage />
      </div>
    );
  }
}

const appDiv = document.getElementById("app");
render(<App />, appDiv);
1

There are 1 best solutions below

1
On
export default function App(){


    useLayoutEffect(()=>{
         // You can use useEffect with timout
         const appDiv = document.getElementById("app");
    },[])

    return (
      <div>
        <HomePage />
      </div>
    );

}

render(<App />, appDiv);