module-federation / node Goto Github PK

When enabling HMR in the server's host app, I get the following error:

ERROR in webpack/runtime/readFile chunk loading
Cannot find module '../hmr/JavascriptHotModuleReplacement.runtime.js'

Looking at the code, I saw the path used to require the HMR runtime is relative, while the other requires for webpack rely directly on the dependency. I debugged the code at this point and the current working directory is the root of my project so the relative path won't work.

I made the change to rely on the dependency instead of the relative path and it worked, so I have created this PR with the changes.

Additional info

Some details about my use case.

I have an app that runs webpack in the client and server, both with HMR enabled.
The app installs a package with common scripts intended to be used across apps, like running webpack in dev mode.
I have a remote module configured for this app.

I get the error when running webpack in dev mode with HMR in the server enabled.

Having both Host and Remote applications running, when trying to navigate directly to a URL on the Host that uses a Remote creates the following error

needs to load remote module from remote1

remotes known to remote1 {}

undefined:493
/******/                                                                Object.assign(global.__remote_scope__._config, remotes)
                                                                                                              ^

TypeError: Cannot read properties of undefined (reading '_config')
    at eval (eval at <anonymous> (/Users/columferry/dev/nrwl/spike/nx-angular-mf-ssr/dist/apps/shell/server/main.js:819:20), <anonymous>:493:56)
    at new ZoneAwarePromise (/Users/columferry/dev/nrwl/spike/nx-angular-mf-ssr/dist/apps/shell/server/main.js:98368:21)
    at Object.__webpack_require__.f.readFileVm (eval at <anonymous> (/Users/columferry/dev/nrwl/spike/nx-angular-mf-ssr/dist/apps/shell/server/main.js:819:20), <anonymous>:433:30)
    at eval (eval at <anonymous> (/Users/columferry/dev/nrwl/spike/nx-angular-mf-ssr/dist/apps/shell/server/main.js:819:20), <anonymous>:98:40)
    at Array.reduce (<anonymous>)
    at Function.__webpack_require__.e (eval at <anonymous> (/Users/columferry/dev/nrwl/spike/nx-angular-mf-ssr/dist/apps/shell/server/main.js:819:20), <anonymous>:97:67)
    at Object../Module (eval at <anonymous> (/Users/columferry/dev/nrwl/spike/nx-angular-mf-ssr/dist/apps/shell/server/main.js:819:20), <anonymous>:14:30)
    at Object.get (eval at <anonymous> (/Users/columferry/dev/nrwl/spike/nx-angular-mf-ssr/dist/apps/shell/server/main.js:819:20), <anonymous>:21:23)
    at /Users/columferry/dev/nrwl/spike/nx-angular-mf-ssr/dist/apps/shell/server/main.js:731:37
    at Generator.next (<anonymous>)

A server error has occurred.
node exited with 1 code.

Test repo is: https://github.com/Coly010/nx-angular-mf-ssr/tree/use-mf-node-plugin

The part setting up the webpack config is here: https://github.com/Coly010/nx-angular-mf-ssr/blob/use-mf-node-plugin/libs/webpack-mf/src/lib/with-module-federation.ts#L305

Steps

1. Clone the repo
2. Run yarn install
3. Have two terminal windows open
4. Run nx serve-ssr shell in one
5. Run nx serve-ssr remote1 in the other
6. Open a browser at localhost:4200/remote1

Info

From some minor investigation, it seems to be the remote is trying to use it's own name to discover if there any remotes, rather than the host trying to find the remote based on it's name

I have detected that when using remote modules generated with sourcemaps, they are not being evaluated properly by the NodeFederation plugin here.

It looks like the problem comes from concatenating the module.exports at the end of the script content, as the last line could be a comment for the sourcemaps. I debugged this case and in this scenario remote is set to undefined and it throws on the following lines when trying to get the module (remote[moduleName]).

Here is an example of the end lines of a remoteEntry with sourcemaps:

/************************************************************************/
/******/ 	
/******/ 	// module cache are used so entry inlining is disabled
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	var __webpack_exports__ = __webpack_require__("webpack/container/entry/remote1");
/******/ 	module.exports = __webpack_exports__;
/******/ 	
/******/ })()
;
//# sourceMappingURL=remoteEntry.js.map

I found a way to avoid this behavior and to add support for remotes generated with sourcemaps that you can check on this PR.

Hi @ScriptedAlchemy

Thanks for sharing this valuable plugin 🙂

After playing a bit with the plugin and checking the source code, I would like to better understand how the current cache mechanism works and how to adapt it to other scenarios when needed.

With the current approach, when running a server (host app), the remote modules are only fetched once, the first time they are needed, and I guess this behavior is intended. But this also means that when the remotes change, the server will not fetch the changes again and you need to restart the server to be updated.

This behavior is easy to reproduce with this example.

I have been experiencing the following issues:

1. When developing an SSR app with React and updating a remote module, server-side rendered code gets outdated and doesn't match the client code. Therefore you get the warnings plus a flash of mismatched content. Also, the server app supports HMR, so restarting the server is not ideal.
2. When running a server-side rendered app in production, the server doesn't know if a remote module has changed and returns outdated content with the corresponding negative effects. To keep the server code updated, you would need to restart it every time a remote module changes, which could be a complex process.

What's the best approach for these scenarios? Can I modify this behavior?
Am I missing something here? 🤔

Thanks!

This repo is going to be shut down and the plugin will be maintained out of what's currently called nextjs-mf.

That MF repo will likely change to /plugins as it will house many parts of the ecosystem under one single location

It now resides here: https://github.com/module-federation/nextjs-mf/tree/main/packages/node

nextjs-mf will be renamed soon.