Issue with image loading in "next-mf"

[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 /<tenant>/<branch> 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.

Does anyone have a workaround for an issue like this? I've been experimenting with setting public paths, etc, but I can't seem to get past this roadblock.

Thanks!

UPDATE:

I've found that changing getCSRImagePath to use similar logic as getSSRImagePath seems to fix things, so::

return ${publicPath} && ${publicPath}.indexOf('://') > 0 ? ${publicPath}.split('/_next')[0] : '',

but I was wondering if possibly some kind of config issue, or if SSR is assumed (required). We are not using SSR (yet).

[dhalbrook]

I have moved this to be an issue: #4257