CODEWITHSUNDEEP
reactjsreact-lazy-load
Hasan
Hasan

Reputation: 991

Failed to fetch dynamically imported module from portal component

I create a portal component(InboxModal). and I want to show it when I click a button with lazy import. but when I call that I got this error:

Failed to fetch dynamically imported module: http://127.0.0.1:port/src/components/portals/inboxModal.tsx?t=1675668116432

my inbox component

const InboxModal = () => {
  const portalDiv = document.getElementById("portal-root")!;
  return createPortal(
    <div className="w-1/3 h-2/3 bg-red-400 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
      <p>hello</p>
    </div>,
    portalDiv
  );
};

export default InboxModal;

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="root"></div>
    <div id="portal-root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

the component that I call the portal component on there

const Inbox = () => {
  const [showModal, setShowModal] = useState<boolean>(false);
 
  const InboxModal = lazy(() => import("../portals/inboxModal"));

  return (
    <div className="overflow-x-auto shadow-md sm:rounded-lg justify-center w-full">
      <div onClick={() => setShowModal((pre) => !pre)}></div>
      <Suspense fallback={<div>loading...</div>}>
        {showModal && <InboxModal />}
      </Suspense>
    </div>
  );
};

export default Inbox;

otherwise, If I remove createPortal from the component. that works perfectly

Upvotes: 0

Views: 238

Answers (0)

Related Questions