Bug/Question: ExternalComponent is rendering component only for once

[aditya81070]

I am using this plugins's v2. It is working quite smoothly except some issues. One issue I found that I am using ExternalComponent to render my interleaved component as mentioned into the README. I have a side navigation that switch between two different MFs and I also have a config.json that have info about each MFs config (proxy etc.) and key is the name of MF. I add all my MFs to an Apps constant like following:

const Apps = {};
Object.keys(config).forEach(appName => {
  Apps[appName] = props => <MicroFrontend appName={appName} location={props.location} />
})

Below is code for MicroFrontend component:

import React from 'react';
import { ExternalComponent } from 'webpack-external-import';
function MicroFrontend({appName, location}) {

return (
   <div className='mf-wrapper'>
       <ExternalComponent
          interleave={__webpack_require__.interleaved(
            `website-${appName}/${appName}-app`
          )}
          export={`${appName}App`}
        />
  </div>
)
}

I am loading all importManifest files in my index.js and they are loaded without any errors.

My side navigation renders Apps[appName] based on the route (I am using react-router-dom for it). Initially my MFs load fine but when I again go to previously visited Router my MFs don't load. I found that everything loads fine except component renederd by ExternalComponent. I tried to fetch the component in an effect but it doesn't work. Is this a problem with ExtermalComponent?

PS: I looked a bit into __webpack_require__.interleaved function exported from this module. It has some checks that if chunk is loaded then it doesn't load it again (not sure but my understanding). If fetching the chunk again is not a good idea then how I will rerender my component that is based on previously loaded chunk.

[aditya81070]

Closing the issue as there is no response from last one week. We moved to webpack module federation that doesn't require ExternalComponent.