module-federation / node Goto Github PK
View Code? Open in Web Editor NEWSoftware streaming to enable node.js support for browser-like chunk loading
License: MIT License
Software streaming to enable node.js support for browser-like chunk loading
License: MIT License
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.
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
yarn install
nx serve-ssr shell
in onenx serve-ssr remote1
in the otherlocalhost:4200/remote1
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.
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:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.