Build compiles but imports break when using optimization.splitChunks.chunks = 'all' with Module Federation

[pratyushseq]

System Info

System:
OS: macOS 13.6.3
CPU: (8) arm64 Apple M1 Pro
Memory: 100.59 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.6.0 - ~/Library/Caches/fnm_multishells/85041_1705309080052/bin/node
Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/85041_1705309080052/bin/yarn
npm: 8.13.2 - ~/Library/Caches/fnm_multishells/85041_1705309080052/bin/npm
Browsers:
Chrome: 120.0.6099.216
Safari: 17.2.1

Details

Add the following config in a module federation project, and the projects will compile, but the imports break in the actual app.

optimization: { splitChunks: { chunks: 'all' } }

As discussed with @ahabhgk and @ScriptedAlchemy, opening this issue to keep track of future solutions

Reproduce link

No response

Reproduce Steps

yarn dev with the config mentioned in any project with Module Federation

[Gillibald]

I had to explicitly set this to be able to load the remote:

rsbuild

chunkSplit: {
            strategy: 'split-by-module'
        }

otherwise the resulting __webpack_exports__ was undefined

[Gillibald]

Coming back to this it even became worse for me. Now I am only able to load the remote by specifying strategy: 'all-in-one'

[pratyushseq]

@Gillibald i just left the whole splitChunks part out, let it fallback to the default async mode. That works reasonably well for me.

[ScriptedAlchemy]

This issue is caused by a conflict between webpack and chunk split with federation. To resolve this, you can use enforce on cacheGroups to override the splits. It is usually safer to use split-by-module or async, as initial module splits can cause the webpack exports to be wrapped in callbacks. This can result in the return value being undefined, rather than the container interface.

[Gillibald]

Thanks a lot. This fixes my issue. How can I achieve this with a pure rsbuild config without touching the rspack config override?

[xc2]

Thanks a lot. This fixes my issue. How can I achieve this with a pure rsbuild config without touching the rspack config override?

@Gillibald would you please try out rsbuild 0.4.0

cc @chenjiahan

[Gillibald]

I still need to specify:

rspack: {
            optimization: {
                splitChunks: {
                    chunks: 'async'
                }
            }

otherwise, the __webpack_exports__ of the remote is undefined

Tested with:

"@module-federation/enhanced": "0.0.13",
"@module-federation/runtime": "0.0.13",
"@module-federation/runtime-tools": "0.0.13",
"@rsbuild/core": "^0.4.0",
"@rsbuild/plugin-image-compress": "^0.4.0",
"@rsbuild/plugin-react": "^0.4.0",
"@rspack/cli": "^0.5.4",
"@rspack/core": "^0.5.4",
"@rspack/dev-server": "^0.5.4",

[chenjiahan]

@Gillibald are you using the moduleFederation.options config?

[Gillibald]

rsbuild.config.ts

tools: {
        rspack: {
            optimization: {
                splitChunks: {
                    chunks: 'async'
                }
            },
            output: {
                publicPath: 'auto' //required otherwise chunk loading fails
            },
            plugins: [new container.ModuleFederationPlugin(federationConfig)]
        }
    }
})

rsbuild.config.mf.ts

const federationConfig: ModuleFederationPluginOptions = {
    name: 'some',
    exposes: {
        './a': './src/components/a',
        './b': './src/components/b',
        './c': './src/components/c',
    },
    remotes: {
        client: 'client@remoteEntry.js',
        lib:
            process.env.NODE_ENV === 'development'
                ? 'lib@http://localhost:3002/lib.js'
                : 'lib@lib.js'
    },
    filename: 'remoteEntry.js',
    shared: {
        react: {
            singleton: true,
            requiredVersion: dependencies['react']
        },
        'react-dom': {
            singleton: true,
            requiredVersion: dependencies['react-dom']
        },
        'react-singleton-context': {
            singleton: true,
            requiredVersion: dependencies['react-singleton-context']
        }       
    }
}

export default federationConfig

[Gillibald]

I am not using options here but I am manually adding the plugin so this might cause issues.

Update: Using this

 moduleFederation: {
        options: federationConfig
    }

instead of

tools: {
        rspack: {
            plugins: [new container.ModuleFederationPlugin(federationConfig)]
        }
    }
})

Fixes the issue for me

[ScriptedAlchemy]

Yes using the rsbuild built-in capability allows to patch is accordingly so chunk split does not collide

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[hardfist]

bump

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!