Server-side rendering does not work with Module Federation

Bug report

What is the current behavior?

I am able to build and start the host and remote servers successfully, but I get this server error when loading the page in the browser. The browser remains spinning until I stop the server.

(node:66910) UnhandledPromiseRejectionWarning: Error: Cannot find module 'webpack/container/reference/remote'
Require stack:
- /Users/suhanwijaya/Desktop/wp5-ssr/host/build/server/bundle.js
while loading "./top-nav" from webpack/container/reference/remote
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
    at Function.Module._load (internal/modules/cjs/loader.js:690:27)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.webpack/container/reference/remote (/Users/suhanwijaya/Desktop/wp5-ssr/host/build/server/bundle.js:171:18)
    at __webpack_require__ (/Users/suhanwijaya/Desktop/wp5-ssr/host/build/server/bundle.js:194:41)
    at handleFunction (/Users/suhanwijaya/Desktop/wp5-ssr/host/build/server/bundle.js:300:31)
    at /Users/suhanwijaya/Desktop/wp5-ssr/host/build/server/bundle.js:319:15
    at Array.forEach (<anonymous>)
    at Object.__webpack_require__.f.remotes (/Users/suhanwijaya/Desktop/wp5-ssr/host/build/server/bundle.js:282:36)
(node:66910) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:66910) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

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

Minimal reproducible repo: https://github.com/suhanw/wp5-ssr

I included a README for the instructions to run locally.

host server webpack config: https://github.com/suhanw/wp5-ssr/blob/main/host/webpack.server.config.js remote server webpack config: https://github.com/suhanw/wp5-ssr/blob/main/remote/webpack.server.config.js

remote exposes the component TopNav, and host consumes and imports TopNav in the App component, here: https://github.com/suhanw/wp5-ssr/blob/main/host/client/components/App/index.js#L3

If you comment out the line above, SSR works (i.e., the App component is rendered on server-side correctly).

PS: I was following this example by @ScriptedAlchemy.

What is the expected behavior?

host should be able to consume shared components exposed by remote for server-side rendering.

Other relevant information: webpack version: 5.12.1 Node.js version: 14.15.3 Operating System: MacOS Catalina 10.15.6 Additional tools: None

[jacob-ebey]

This is a simple case of misconfigured externals: https://github.com/suhanw/wp5-ssr/pull/1

No bug here, this issue can be closed.

I have submitted a PR to webpack-node-externals to try to avoid this issue in the future: https://github.com/liady/webpack-node-externals/pull/92

[alexander-akait]

@jacob-ebey thanks