core
core copied to clipboard
errorLoadRemote runtime hook is getting overridden in nextjs-mf plugin
Describe the bug
I am trying to use the new errorLoadRemote hook with the latest nextjs-mf plugin but I think the hook is getting overridden here and I am not being able to return a simple custom text to replace the component that failed to load.
I don't fully understand all the things that the internal runtimePlugin definition is doing but I would be willing to help if anyone can point me in the right direction.
Reproduction
https://github.com/ryok90/nextjs-mf-examples/tree/main/next14.1.0-mf8.1.7-error-hook
Used Package Manager
npm
System Info
System:
OS: macOS 14.2.1
CPU: (10) arm64 Apple M2 Pro
Memory: 55.41 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
Yarn: 1.22.21 - ~/.nvm/versions/node/v20.10.0/bin/yarn
npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
pnpm: 8.14.2 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
Browsers:
Chrome: 120.0.6099.234
Safari: 17.2.1
Validations
- [X] Read the docs.
- [X] Read the common issues list.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Module federation issue and not a framework-specific issue.
- [X] The provided reproduction is a minimal reproducible example of the bug.
I'm curious what happens if there are two plugins that both declare a errorLoadRemote hook. This hook appears to be intended to resolve with a fallback module, but it doesn't appear to pass the module to the next handler like a middleware would. Does it just take the first/last one it finds and return it?
I'm wondering because I would like to add some custom logging for when a remote module doesn't load, but I can see that the default runtime plugin defined in nextjs-mf is already returning a fake module and I don't want to override that behavior.
UPDATE: it looks like it just takes the last one because I'm seeing the logs but I'm not returning a fake module so I'm getting a TypeError. Is there a way to pass the returned module from the previous plugin into the next so that I can use that if it's available?
UPDATE 2: I was able to do this, and it appears to work, but it makes the console pretty noisy due to the log statements in the nextjs-mf runtime plugin (could those be removed or put behind a flag?):
async errorLoadRemote(args) {
const { id, error, origin } = args
// get the remote ID from the module ID
const [remoteID] = id.split('/')
// log the error
log(remoteID, `Failed to get module "${id}". Returning empty module.`)
console.log(error)
// find the built-in NextJS runtime plugin
const nextInternalPlugin = origin?.options?.plugins?.find?.(plugin => plugin.name === 'next-internal-plugin')
// if it's there, defer to the default error handling
return nextInternalPlugin?.errorLoadRemote?.(args)
},
yeah send me a pr removing them, happy to silence it.
also @2heal1 what are your thoughts about chaining or calling next() on runtime plugins if there's a case like this where multiple plugins call the same hooks?
Stale issue message
Closing this one since my PR got merged.