So I have a remote app that is being consumed in the host app. I’m importing the Button component from the remote and lazy loading in the host app. The problem is that the remote app crashes the host app if not available. I don’t want to show the Button component in the host app if the remote app is down.

I tried using promises in the host’s webpack config file like so

plugins: [
new ModuleFederationPlugin({
name: ‘shell’,
filename: ‘remoteEntry.js’,
remotes: {
common_components_lib: promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search) const version = urlParams.get('app1VersionParam') // This part depends on how you plan on hosting and versioning your federated modules const remoteUrlWithVersion = 'http://localhost:3001/' + version + '/remoteEntry.js' const script = document.createElement('script') script.src = remoteUrlWithVersion script.onload = () => { // the injected script has loaded and is available on window // we can now resolve this Promise const proxy = { get: (request) => window.common_components_lib.get(request), init: (arg) => { try { return window.common_components_lib.init(arg) } catch(e) { console.log('remote container already initialized') } } } resolve(proxy) } // inject this script with the src set to the versioned remoteEntry.js document.head.appendChild(script); }) ,