@mf/loadable-adapters - possible fix #2
Description
LOG:
[2023-04-24T20:22:06.663Z] App1 is running: 🌎 http://localhost:1234
loadable-components: failed to synchronously load component, which expected to be available {
fileName: 'webpack/container/remote/app2/Login_register',
chunkName: 'app2-Login_register',
error: '__webpack_modules__[moduleId] is not a function'
}
GET: http://localhost:3002/static/federation-stats.json - true 200
/node_modules/@mf/loadable-adapters/src/federated-chunk-extractor/federated-chunk-extractor.js:118
remoteStats.exposes[component].forEach((chunk) => {
^
TypeError: Cannot read properties of undefined (reading 'forEach')
at /node_modules/@mf/loadable-adapters/src/federated-chunk-extractor/federated-chunk-extractor.js:118:48
at Array.forEach (<anonymous>)
at FederatedChunkExtractor.<anonymous> (/node_modules/@mf/loadable-adapters/src/federated-chunk-extractor/federated-chunk-extractor.js:111:34)
at Generator.next (<anonymous>)
at fulfilled (/node_modules/tslib/tslib.js:164:62)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Node.js v20.0.0
in code:
112:
mfRenderedComponents.forEach(([appName, component]) => {
if (mfChunks.length === 0) {
// eslint-disable-next-line no-console
console.warn(`${appName}: could not find a remote for ${component}`);
return;
}
const remoteStats = mfChunks.find((remote) => remote.name === appName);
remoteStats.exposes[component].forEach((chunk) => {
this.chunks.push(chunk);
const assetUrl = `${this.mfPublicHost[appName]}/${chunk.chunk}`;
const newAsset = {
url: assetUrl,
type: isScriptFile(assetUrl) ? ScriptType.SCRIPT : ScriptType.STYLE,
};
if (chunk.integrity) {
newAsset.integrity = chunk.integrity;
}
this.assets.push(newAsset);
});
});
:130
Is possible wrap foreach remoteStats.exposes[component].forEach((chunk) => { in if (remoteStats.exposes[component]){ like this:
if(remoteStats.exposes[component]){
remoteStats.exposes[component].forEach((chunk) => {
this.chunks.push(chunk);
const assetUrl = `${this.mfPublicHost[appName]}/${chunk.chunk}`;
const newAsset = {
url: assetUrl,
type: isScriptFile(assetUrl) ? ScriptType.SCRIPT : ScriptType.STYLE,
};
if (chunk.integrity) {
newAsset.integrity = chunk.integrity;
}
this.assets.push(newAsset);
});
}
I don't know how correct it is, but somehow it works and doesn't return an error anymore.