Federated module is undefined ! ScriptExternalLoadError: Loading script failed

[knightswatch3]

Firstly, I appreciate anyone taking time to look at this. And yes, this might look like a duplicate discussion.

Honestly, I've tried the solutions that worked for others in discussions but none of the fixes worked.

Issue :

a. Loaded remote module from app1 is undefined. I am unable to use any of the store methods app1 is exporting via remote module.
b. I have a similar issue with another app (not in the repo currently ) which exposes a react component called <Auth/> which when I import and use in the index.tsx of app2 I run into

   Error.tsx:45 Error: ScriptExternalLoadError: Loading script failed.
   (missing: http://localhost:3002/remoteEntry2.js)
   while loading "./src" from webpack/container/reference/authremote
   remote authremote/Auth 6 bytes (remote) 6 bytes (share-init) [built] [code generated]
   external "authremote@http://localhost:5002/remoteEntry2.js" 42 bytes [built] [code generated]

I believe these two are inter-related and solving the first(a) will result in a fix for the other.

federated-module-issue

How to start ?

1. Clone the repo.

2. Ensure you have pnpm (8.14.1) and node(v20.11.1).

3. cd into app1 and run pnpm run-app1

4. cd into app2 and run pnpm run-app2

5. This will spin up both the apps.

6. App1 Serves the remote module on 5001 as configured:

7. App2 Serves the html for the react code composed.
   

But app1 finds the imported federated module as undefined. Which is confusing.

If I export a remote module which has a React components from *.tsx file I experience this issue:

Here is the link to the reproducible repo for the issue (a). Looking forward for some interactive discussion to understand and fix this issue.

What have I tried ? (and not worked)

1. Ensuring shared dependencies are valid.
2. Ensure the network port doesn't issue any errors for remote module imports.
3. Ensure that the remote module is actually serving the remoteEntry in the mentioned port(webpack config)
4. Passing library => var on the hosting side of the module to be available through the global scope of the app.
5. Passing the module as a promise from the remote object.

[knightswatch3]

Is this an existing bug in the webpack v5 ?

[alexander-akait]

There are no bugs, please read the message (missing: http://localhost:3002/remoteEntry2.js) and look at dev tools console

[knightswatch3]

@alexander-akait Could you please let me know what I should be looking for ?
I see that the remoteEntry.js is loaded. But it doesn't find what it is looking for.
I can confirm by looking at the n.w tab that the script is loaded.

[alexander-akait]

Can you create a reproducible test repo?

[SarathSantoshDamaraju]

Any update on this, i have a similar issue

[gilmillasseau]

@knightswatch3 did you found any solution for this? I believe I am facing the same issue

Host
"react": "^18.2.0",
"react-dom": "^18.2.0"
"webpack": "^5.91.0",

Remote
"react": "^18.2.0",
"react-dom": "^18.2.0"
"webpack": "^5.91.0",

Node version: v20.11.1

[AravinthK820]

I am also having the same issue i am using gatsby.config.js