enableImageLoaderFix in next-mf doesn't work for non-root remotes

[dhalbrook]

We're using the latest version of @module-federation/nextjs-mf (version ~8.4.11 as of writing, with the following options:

extraOptions: {
  enableImageLoaderFix: true,
  enableUrlLoaderFix: true
}

In our usage, multiple single tenant sites are loading from a single shared remote, where the remote has paths to denote files different tenants and branches such as https://<remote>/<tenant>/<brach>/foo.jpg.

When we load components from the remote using

import { importRemote } from '@module-federation/utilities';

things load as expected. The remoteEntry.js loads its subsequent child chunks from the non-root location on the remote just fine. However, when we try to load an image, it attempts to go back to the root of the remote to load it, losing the // directories.

As far as I can find, it comes down to this part of the plugin where it's attempting the loader fix (getCSRImagePath)::

return ${publicPath} && ${publicPath}.indexOf('://') > 0 ? new URL(${publicPath}).origin : '',

The public path is being stripped down to the origin, so it loses the context when loading images.

Changing the logic to match the logic in "getSSRImagePath" seems to fix things:

 const splitted = ${publicPath} ? ${publicPath}.split('/_next') : '',
return splitted.length === 2 ? splitted[0] : '',

[dhalbrook]

Accidentally opened this in the wrong project. Closing and replacing with this: module-federation/core#2872