React HtmlElement Micro Front end is not reloading in Shell Application

Question

I am trying to inject below react mfe into another angular shell application. But, it is loading first time, but when they hide or remove from dom and then again it is not able to load.

Can you please help what is wrong in below code so that they can reload or hide/show properly.

Thanks in advance.

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import AchPayment from "./AchPayment";
//import createCustomElement from "react-custom-element-builder";

const mount = (el, props) => {
  const { consumerName, token, achTransactionRequest } = props;
  const root = createRoot(el!);

  if (consumerName) {
    if (
      consumerName.toUpperCase() == "APEX" ||
      consumerName.toUpperCase() == "MYFINANCING"
    ) {
      class AchPaymentElement extends HTMLElement {
        connectedCallback() {
          root.render(
            <div>
              <AchPayment {...props} />
            </div>
          );
        }
      }

      customElements.get("ach-payment-element") ||
        customElements.define("ach-payment-element", AchPaymentElement);
    } else {
      return root.render(<h1>Invalid Consumer !</h1>);
    }
  } else {
    return root.render(<h1>Invalid Consumer !</h1>);
  }
};
const props = {
  consumerName: "MyFinancing",
};
const devRoot = document.querySelector("#_myMfe");
mount(devRoot, props);

Answer 1

i recommend this approach, might help

https://github.com/module-federation/module-federation-examples/tree/master/angular14-react

more documentation you can find here https://webpack.js.org/concepts/module-federation/