core icon indicating copy to clipboard operation
core copied to clipboard

errorLoadRemote runtime hook is getting overridden in nextjs-mf plugin

Open ryok90 opened this issue 1 year ago • 2 comments

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.

image

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

ryok90 avatar Jan 26 '24 21:01 ryok90

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)
  }, 

benmarch avatar Feb 14 '24 15:02 benmarch

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?

ScriptedAlchemy avatar Mar 07 '24 02:03 ScriptedAlchemy

Stale issue message

github-actions[bot] avatar May 06 '24 15:05 github-actions[bot]

Closing this one since my PR got merged.

ryok90 avatar May 06 '24 16:05 ryok90