React Master Layout Shifts for Dynamically Loaded Remote Modules

[gbcerna97]

Versions

• vite-plugin-federation: ^1.3.6
• vite: ^4.4.5

Details

Hi,

I am using originjs/vite-plugin-federation with React TypeScript to load remote module builds to the host frontend application (served from a single express js server). Everything is working just fine. I only have one file that loads all remote module dynamically depending on user access. The problem is the master layout. For context, I am using the licensed version of Metronic react demo1. In the master layout, the header, sidebar and outlet is loaded. But the position of the main content that is loaded in the outlet tag shifts to the bottom of the page. Please refer to the image and code snippet below:

Supposed layout:

Layout when dynamic module is loaded:

<PageDataProvider>
  <div className='d-flex flex-column flex-root app-root' id='kt_app_root'>
    <div className='app-page flex-column flex-column-fluid' id='kt_app_page'>
      <HeaderWrapper />
      <div className='app-wrapper flex-column flex-row-fluid' id='kt_app_wrapper'>
        <Sidebar />
        <div className='app-main flex-column flex-row-fluid' id='kt_app_main'>
          <div className='d-flex flex-column flex-column-fluid'>
            <Outlet />
          </div>
          <FooterWrapper />
        </div>
      </div>
    </div>
  </div>
  <ActivityDrawer />
  <RightToolbar />
  <DrawerMessenger />

  <InviteUsers />
  <UpgradePlan />
  <ScrollTop />
</PageDataProvider>