Module Federation Share should support layers/issuerLayer

[ScriptedAlchemy]

Feature request

Loader layers currently have no convention for support when using something like issueLayer, for example with RSC

What is the expected behavior?

There should be a convention to specify or auto assign the layers used when creating the shares

What is motivation or use case for adding/changing the behavior?

RSC support likely will need loader layers or layers to work

How should this be implemented in your opinion?

Unsure but i think it needs to be cone at ConsumeShared and ProvideShared, either in the hooks or in the Module classes of these - but i do not know

Are you willing to work on this yourself?
yes

[ScriptedAlchemy]

@alexander-akait How does one specify the layer of a module?

In consumeSharedModule - see it technically supports layer

  /**
   * @param {LibIdentOptions} options options
   * @returns {string | null} an identifier for library inclusion
   */
  override libIdent(options: LibIdentOptions): string | null {
    const { shareKey, shareScope, import: request } = this.options;
    return `${
      this.layer ? `(${this.layer})/` : ''
    }webpack/sharing/consume/${shareScope}/${shareKey}${
      request ? `/${request}` : ''
    }`;
  }

However most loaders use issuerLayer to influence it, how would one specify a layer the module should behave as?

Here is an example config i was working with to try and find a solution to this:

const { ConsumeSharedPlugin } = require('../../../../dist/src');

module.exports = {
  mode: 'development',
  devtool: false,
  entry: {
    main: {
      import: './index.js',
      layer: 'entry-layer',
    },
  },
  experiments: {
    layers: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        issuerLayer: 'entry-layer',
        layer: 'loader-layer', //react module will not have loader layer transforms
      },
      {
        test: /react/,
        issuerLayer: 'entry-layer', // would work if this were commented out
        layer: 'react-layer', 
      },
    ],
  },
  plugins: [
    new ConsumeSharedPlugin({
      consumes: {
        react: {
          singleton: true,
        },
       rscreact: {
          import: 'react',
          singleton: true,
          layer: 'loader-layer', // or should it be issuerLayer?
        },
      },
    }),
  ],
};

Ideally it should just add all used "react" modules automatically instead of having to specify it, so if i import react, then somewhere else i import react with an issuerlayer, there would be 2 modules (react-layer)./react.js and ./react.js

[alexander-akait]

I see what you are trying to solve, pr welcome, I have not studied in detail how to do it better, so I am ready to consider your solution

[ScriptedAlchemy]

@alexander-akait can you add me as friend on discord so we can DM? I am unable to DM directly but it would be helpful to corrospond back and forth in chat around this area.

I found that Module accepts super(a,b,layer) so I can set layer in module factory. However I do not know if there is way to set issuerLayer as well. So that module would behave as if it was from issuerlayer too.

[harm-gamer]

can you explain me more in details for this issue

[ScriptedAlchemy]

module-federation/core#3276