Bug/Question: ExternalComponent is rendering component only for once
aditya81070 opened this issue · 1 comments
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.
Closing the issue as there is no response from last one week. We moved to webpack module federation that doesn't require ExternalComponent.