Module Federation: injecting scripts for remotes with HtmlWebpackPlugin

Bug report

What is the current behavior?

During runtime when request to remote application is pending, injected script is blocking the page.

If the current behavior is a bug, please provide the steps to reproduce.

In the scenario we have host and remote applications:

• host application shell (localhost:3000)
• remote app (localhost:3002) which is not responding, we simulate request pending by setting the timeout

shell webpack configuration:

new ModuleFederationPlugin({
  name: "shell",
  filename: "remoteEntry.js",
  remotes: {
    app: 'app@http://localhost:3002/remoteEntry.js',
  }
})
new HtmlWebpackPlugin({
    template: "./public/index.html",
    inject: "body",
})

Source code of app:

const express = require("express");
const app = express();
const port = 3002;
app.use((req, res, next) => setTimeout(next, 30000));
app.get("*", (req, res) => { res.send("Hello World!"); });
app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); });

As you can see script connecting for the remote entry is located in head tag.

We can use promise based loaders for remotes, pass a promise to this remote and inject into body tag:

market: `promise new Promise(resolve => {
  const remoteUrl = 'http://localhost:3002/remoteEntry.js'
  const script = document.createElement('script')
  script.async = true;
  script.defer = true;
  script.src = remoteUrl
  document.body.appendChild(script);
})
`

and at runtime script is located at the end body but the page is still blocked by loading remote entry.

Alternatively we can dynamically load remotes during runtime using this

What is the expected behavior?

1. When inject: body is set with HtmlWebpackPlugin put loading script at the end of the body tag.
2. Do not block page/application when remote entry is not responding.

Other relevant information: webpack version: 5.38.1 Node.js version: 14.17.1 Operating System: macOS/Ubuntu Additional tools: html-webpack-plugin: 5.3.1

[serrg]

@DevHunvee3 The issue still occurs for us and we are using workaround for non blocking render:

import { ComponentType } from 'react';

declare global {
  interface Window {
    __remotes__: Record<string, string>;
  }

  // eslint-disable-next-line @typescript-eslint/camelcase
  const __webpack_init_sharing__: any;
  // eslint-disable-next-line @typescript-eslint/camelcase
  const __webpack_share_scopes__: any;
}

const getRemoteEntryUrl = (module: string) =>
  `${module}@${getPublicPath(module)}${REMOTE_ENTRY}`;


const dynamicImport = async (path: string): Promise<{ default: ComponentType<any> }> => {
  const remoteName = path.split('/')[0];

  if (!remoteName) {
    throw new Error(`URL not configured for remote '${path}'.`);
  }

  const remoteUrl = getRemoteEntryUrl(remoteName);

  if (remoteUrl.split('@').length !== 2) {
    throw new Error(`URL misconfigured for remote '${path}'`);
  }

  const [moduleName, moduleUrl] = remoteUrl.split('@');

  await __webpack_init_sharing__('default');

  await new Promise<void>((resolve, reject) => {
    const element = document.createElement('script');

    element.src = moduleUrl;
    element.type = 'text/javascript';
    element.async = true;

    element.onload = () => {
      element.parentElement?.removeChild(element);
      resolve();
    };

    element.onerror = (err: Event | string) => {
      element.parentElement?.removeChild(element);
      reject(err);
    };

    document.head.appendChild(element);
  });

  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
  // @ts-ignore
  const container = window[moduleName] as any;

  // eslint-disable-next-line @typescript-eslint/camelcase
  await container.init(__webpack_share_scopes__.default);

  const component = `.${path.replace(remoteName, '')}`;
  const factory = await container.get(component);

  return factory();
};

and using dynamicImport like:

const Comp = () => {
  const fallback = <></>;
  const RemoteService = lazy(() => dynamicImport('remoteService'));

  return (
    <ErrorBoundary FallbackComponent={() => <></>}>
      <Suspense fallback={fallback}>
        <RemoteService />
      </Suspense>
    </ErrorBoundary>
  );
};

where remoteService is remote path from module federation config

[alexander-akait]

Please open an issue in HtmlWebpackPlugin, it should be solved there