module-federation-examples: cannot find remote module if publicPath includes a path as part of the URL... http://[host]:[port]/[path]/

HI,

I have an issue where my remote application has it’s web root set as /shell/. So it needs its publicPath to be /shell/ in order to serve content.

When I create a host application that tries to use an exposed component from the remote it needs the host publicPath to be:

http://localhost:8080/

without the /shell/

I can not reconcile the two. If I set the publicPath to /shell/ in remote and build, with webpack, to dist/ directory then the remote will work correctly.

If I then change the publicPath in the remote to http://localhost:8080/ and run webpack serve; without building to disc again, then my host imports the remote component correctly.

Obviously this is not going to work for the apps when they are deployed. I have tried to dynamically change the publicPath at runtime but it seems that the host can not find the remote in order to change the path.

I do see remoteEntry.js under localhsot:8080 in chrome console on the host and I do see the StandAlone component and set-public-path referenced in there.

So my questions are:

1. most obvious , why is this not working?
2. What does the key in the ‘exposes’ property reference, in other words what is the ‘./’ prefixing the component name. Is this a path ?
3. Can federation reference publicPath as more than just ‘http://[host]:[port]/’, can it reference a URL with /path. If so is my issue something to do with my path set up rather than federation itself?

Any pointers/help on this would be much appreciated, I have been going round in circles for longer than I care too mention; so I know its going to be something obvious that I just can’t see.

Thanks!

This is the error I get:

ScriptExternalLoadError Loading script failed. (missing: http://localhost:8080/shell/remoteEntry.js) while loading “./set-public-path” from webpack/container/reference/remote

Below is a bare bones config that I am using:

//remote webpack.config.js

...
entry: {
	    remote: './set-public-path',
            app: [
                '~/common
                `~/shell`
            ]
        },
        mode: 'development',
        output: {
            path: path.resolve(__dirname, 'dist/shell'),
            filename: '[name].js',
            publicPath: '/shell/'
        },
plugins: [
        new ModuleFederationPlugin({
            name: 'remote',
            library: { type: "var", name: 'remote' },
            filename: 'remoteEntry.js',
            exposes: [
                 `./set-public-path`,
                {'./StandAlone': path.resolve(contextPath, `src/stand-alone/StandAlone.tsx`)}
            ],
            shared: {            
                react: {
                    eager: true
                }
            },
        }),
    ]
...

//host webpack.config.js

...
    plugins: [
        new ModuleFederationPlugin({
            name: host,
            'remote': `remote@http://localhost:8080/shell/remoteEntry.js`
        }),
    ],
...

//remote set-public-path.js

export function set(value) {
    __webpack_public_path__ = value;
}

//host index.js

const publicPath = await import('remote/set-public-path');
publicPath.set('http://localhost:8080/');

//remote index.js

// @ts-ignore
import('./bootstrap');