ReactDom.render throws Illegal invocation while updating hot modules

While trying to integrate HMR, getting an error. I have followed everything as per the docs but still not able to resolve the issue.

Uncaught TypeError: Illegal invocation
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at flushPassiveEffectsImpl (react-dom.development.js:23543)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at react-dom.development.js:23324
    at workLoop (scheduler.development.js:590)
    at flushWork (scheduler.development.js:545)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)

The index.js file

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import reportWebVitals from "@src/analytics/reportWebVitals";
import PolyFills from "@utils/polyfills";
import sendToGoogleAnalytics from "@src/analytics/tracker/webVitalAnalytics";
import * as serviceWorker from "./serviceWorker";
import App from "./App";

let initialImports = Promise.all(PolyFills());
// using mimic in development mode
if (process.env.NODE_ENV === "developments") {
  initialImports = import("mimic");
}

const renderApp = (AppComponent) => () => {
  ReactDOM.render(
    <React.StrictMode>
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <AppComponent />
      </BrowserRouter>
    </React.StrictMode>,
    document.getElementById("root")
  );
};

initialImports.then(renderApp(App));

// Enable Hot Module Replacement (HMR)
if (module.hot) {
  module.hot.accept("./App", () => {
    import("./App").then((mod) => {
      const AppComponent = mod.default;
      renderApp(AppComponent)();
    });
  });
}

Source: Ask Javascript Questions

LEAVE A COMMENT