ScriptExternalLoadError: Loading script failed

[popuguytheparrot]

I'm trying to share a hook between two applications that are in different repositories. I catch error

// yes, i install babel plugin and set webpack flag 
const useUserLogin = await import("CorpCRM/userUserLogin")

// hub app
 new ModuleFederationPlugin({
            name: 'CorpCRM',
            filename: 'remoteEntry.js',
            exposes: {
                useUserLogin: './src/hooks/useUserLogin',
            },
            remotes: {
                app2: 'app2@http://localhost:3002/remoteEntry.js',
            },
            shared: [{ react: { singleton: true }, 'react-dom': { singleton: true } }],
        })

// second app
    new ModuleFederationPlugin({
      name: "app2",
      filename: "remoteEntry.js",
      remotes: {
        CorpCRM: 'CorpCRM@http://localhost:7777/remoteEntry.js',
      },
      shared: [{ react: { singleton: true }, 'react-dom': { singleton: true }}],
    })

[alexander-akait]

Try to open http://localhost:7777/remoteEntry.js, looks you have wrong URL

[popuguytheparrot]

any updates?

[alexander-akait]

Be patient, I'll see soon

[alexander-akait]

Maybe you have browser cache? because when I change (app2/webpack.config.js):

new ModuleFederationPlugin({
      name: "app2",
      filename: "remoteEntry.js",
      remotes: {
        // No 7777 port
        CorpCRM: 'CorpCRM@http://localhost:3001/remoteEntry.js',
      },
      shared: [{ react: { singleton: true }, 'react-dom': { singleton: true }}],
}),

And change (app2/src/App.tsx):

const useUserLogin = await import("CorpCRM/useUserLogin")

to

const useUserLogin = (await import("CorpCRM/useUserLogin")).default

all works fine

Note: you need run both server, i.e.

cd reproduce-repo
// In one TTY
cd app1 && npm install && npm run start
// In second TTY
cd app2 && npm run start

[popuguytheparrot]

Now catch this error

[alexander-akait]

You have 404, it means you still have invalid port/host/etc, double check it, when you run cd app1 && npm install && npm run start you should see in console 3001 port, when you run cd app2 && npm run start you should see in console 3002, and please open two console windows, and run two dev server, for first you need to run cd app1 && npm install && npm run start, for second you need to run cd app2 && npm install && npm run start

[knightswatch3]

I have a similar issue. There are two apps (app1 and app2) and everytime I import app1 which is a federated module and try to use methods of the exported content from remote, the value is undefined. And this is leading to the ScriptLoadErrors.
All my endpionts are valid as I verified they are loaded in the UI.