Skip to content

WIP: Module Reloading Stratagies #3809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 13 commits into
base: main
Choose a base branch
from
Draft

Conversation

ScriptedAlchemy
Copy link
Member

@ScriptedAlchemy ScriptedAlchemy commented May 31, 2025

Description

Investigating better stratagies for hot reloading node servers when federated modules change.

Related Issue

Types of changes

  • Docs change / refactoring / dependency upgrade
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)

Checklist

  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have updated the documentation.

Copy link

changeset-bot bot commented May 31, 2025

⚠️ No Changeset found

Latest commit: df0c77a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

netlify bot commented May 31, 2025

Deploy Preview for module-federation-docs ready!

Name Link
🔨 Latest commit df0c77a
🔍 Latest deploy log https://app.netlify.com/projects/module-federation-docs/deploys/6840701a0f67eb00089e8bfd
😎 Deploy Preview https://deploy-preview-3809--module-federation-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

const vm = require('vm');

// Webpack runtime code for in-memory HMR - only executed when webpack is available
function injectInMemoryHMRRuntime(__webpack_require__) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

copy over the runtime module from HMR plugin - the plugin (in node targets) is designed to read filesystem only to check for updates. I replace some of the methods to allow in-memory patches, so that i could fetch() the update from a KV store or database etc and not need to manually write to disk.

/******/
/******/ // no external install chunk
/******/
/******/ function loadUpdateChunk(chunkId, updatedModulesList) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

node federation plugin already patches require.f.readFileVM but i never updated it to include the HMR stuff - in future this code could live in the node runtime plugin where other chunk loading stuff already exists.

Comment on lines +265 to +267
app.get('/admin', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'admin.html'));
});

Check failure

Code scanning / CodeQL

Missing rate limiting High

This route handler performs
a file system access
, but is not rate-limited.

Copilot Autofix

AI 7 days ago

Copilot could not generate an autofix suggestion

Copilot could not generate an autofix suggestion for this alert. Try pushing a new commit or if the problem persists contact support.

}
} catch (error) {
console.error(
`❌ [API HMR] Error applying update for ${filename}:`,

Check failure

Code scanning / CodeQL

Use of externally-controlled format string High

Format string depends on a
user-provided value
.

Copilot Autofix

AI 7 days ago

To fix the issue, the filename variable should be sanitized or safely included in the format string using a %s specifier. This ensures that the variable is treated as a string and prevents any unintended format specifiers from being interpreted.

Steps to fix:

  1. Replace the direct interpolation of filename in the format string with a %s specifier.
  2. Pass the filename variable as an additional argument to the logging function, ensuring it is treated as a string.

Changes required:

  • Modify the logging statement on line 625 in apps/vm-hotreload/full-demo/client/custom-hmr-helpers.js to use a %s specifier and pass filename as an argument.

Suggested changeset 1
apps/vm-hotreload/full-demo/client/custom-hmr-helpers.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/apps/vm-hotreload/full-demo/client/custom-hmr-helpers.js b/apps/vm-hotreload/full-demo/client/custom-hmr-helpers.js
--- a/apps/vm-hotreload/full-demo/client/custom-hmr-helpers.js
+++ b/apps/vm-hotreload/full-demo/client/custom-hmr-helpers.js
@@ -624,3 +624,4 @@
       console.error(
-        `❌ [API HMR] Error applying update for ${filename}:`,
+        '❌ [API HMR] Error applying update for %s:',
+        filename,
         error,
EOF
@@ -624,3 +624,4 @@
console.error(
`❌ [API HMR] Error applying update for ${filename}:`,
'❌ [API HMR] Error applying update for %s:',
filename,
error,
Copilot is powered by AI and may make mistakes. Always verify output.
lastAppliedId = Math.max(lastAppliedId, data.update.id);
} catch (updateError) {
console.error(
`❌ Failed to apply real-time update to ${data.update.filename}:`,

Check failure

Code scanning / CodeQL

Use of externally-controlled format string High

Format string depends on a
user-provided value
.

Copilot Autofix

AI 7 days ago

To fix the issue, sanitize the data.update.filename value before using it in the log message. This can be achieved by ensuring that the filename is treated as a string and escaping any potentially harmful characters. Alternatively, use the %s specifier in the format string and pass the untrusted data as a separate argument to console.error.

The best approach is to use the %s specifier, as it explicitly treats the untrusted input as a string and avoids any unintended interpretation of special characters.

Suggested changeset 1
apps/vm-hotreload/full-demo/client/src/index.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/apps/vm-hotreload/full-demo/client/src/index.js b/apps/vm-hotreload/full-demo/client/src/index.js
--- a/apps/vm-hotreload/full-demo/client/src/index.js
+++ b/apps/vm-hotreload/full-demo/client/src/index.js
@@ -130,3 +130,4 @@
           console.error(
-            `❌ Failed to apply real-time update to ${data.update.filename}:`,
+            '❌ Failed to apply real-time update to %s:',
+            data.update.filename,
             updateError,
EOF
@@ -130,3 +130,4 @@
console.error(
`❌ Failed to apply real-time update to ${data.update.filename}:`,
'❌ Failed to apply real-time update to %s:',
data.update.filename,
updateError,
Copilot is powered by AI and may make mistakes. Always verify output.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant