Description
Hi guys,
I'm trying to integrate CRA 4.0.1 in our setup with micro frontend, means: container app is running on a WDS (Webpack Dev Server) instance and the micro-frontend app is running on it's own WDS instance on other port. container app will then load js bundle from the WDS of the micro frontend app and mount the micro frontend component in it's DOM dynamicall at runtime.
FAST REFRESH works so far for code changes of container app, but NOT for changes coming from the micro frontend component. The HMR client instance (webpackHotDevClient.js) of the micro frontend gets notifified any time it's code has been changed and kicks off the hot update process, but it does nothing. I have added some console logs into the webpackHotDevClient.js to see what happen on the hot update process, you may want to take a look at them:
handleWarnings isHotUpdate= true
bundle-investorprofile-finances.js:127197 TB tryApplyUpdates - module.hot= {_acceptedDependencies: {…}, _declinedDependencies: {…}, _selfAccepted: false, _selfDeclined: false, _selfInvalidated: false, …}
bundle-investorprofile-finances.js:127201 TB tryApplyUpdates - isUpdateAvailable()= true
bundle-investorprofile-finances.js:127202 TB tryApplyUpdates - canApplyUpdates()= true
bundle-investorprofile-finances.js:127237 TB tryApplyUpdates - result of module.hot.check = Promise {<pending>}
bundle-investorprofile-finances.js:127239 TB tryApplyUpdates - updatedModules = ["./src/themenblock/investorprofile-finances/steps/WphgPickUp.tsx"]0: "./src/themenblock/investorprofile-finances/steps/WphgPickUp.tsx"length: 1__proto__: Array(0)
bundle-investorprofile-finances.js:127212 TB handleApplyUpdates - hasReactRefresh = true
bundle-investorprofile-finances.js:127213 TB handleApplyUpdates - wantsForcedReload = false
If you take a look at the log line:
TB tryApplyUpdates - updatedModules = ["./src/themenblock/investorprofile-finances/steps/WphgPickUp.tsx"]
you see, that the hot update process of the HMR client in webpackHotDevClient.js gets the right piece of code that has been changed, it is ./src/themenblock/investorprofile-finances/steps/WphgPickUp.tsx, but somehow it does not know how to use it to update the DOM, so nothing happens to the DOM.
If you have any idea where i have to take a look at pls help! I'm lost!
Thanks!