Antd theme is not working with nextjs module federation 8.1.0 and nextjs 14.1.4

[prakashmallow]

Describe the bug

When using Next.js v14.1.4 along with @module-federation/nextjs-mf v8.1.0, I encountered an issue with the Ant Design (Antd) theme configuration. In this setup, the root Next.js app successfully provides the theme changes to child Next.js apps. However, while the root Next.js app consumes the theme changes, the child Next.js app only displays the default theme without incorporating the Antd theme changes.

Tried with the combination of Nextjs version 13.4.7 and @module-federation/nextjs-mf v8.1.0, Next.js v14.1.4 and @module-federation/nextjs-mf v7.0.8. But it's not working.

As a workaround, I downgraded to Next.js version 13.4.7 and @module-federation/nextjs-mf v7.0.8. With this configuration, the Antd theme changes are functioning correctly on both the root and child Next.js apps.

Note: the below two @module-federation/nextjs-mf working fine with Nextjs all versions @module-federation/nextjs-mf v7.0.8 @module-federation/nextjs-mf v8.1.0

Reproduction

Demo link Root app repository Child app 1 respository Child app 2 respository

Used Package Manager

yarn

System Info

Environment	Info
antd	5.15.4
nextjs	14.1.4
React	18
@module-federation/nextjs-mf	8.1.0
System	Mac
Browser	Chrome latest version

Validations

• [X] Read the docs.
• [X] Read the common issues list.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Module federation issue and not a framework-specific issue.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[ScriptedAlchemy]

Is this an issue on next 14 specifically? have you tried sharing and/ instead of antd?

[prakashmallow]

@ScriptedAlchemy This issue is not limited to Next.js version 14; it also occurs in version 13.4.8 and later. The Antd theme does not function properly with module-federation/nextjs-mf.

[ScriptedAlchemy]

This is caused by nexts own optimize package imports / modularizeImports https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports

Its not added to share scope at all.

You can try doing this: import * as _ from 'antd' Which seems to make it opt into the bundle. You can also try exposing antd to force webpack to bundle it.

Not much we can do on our end. Next is incompatible with module federation

[prakashmallow]

@ScriptedAlchemy It's still not working. I think using the @ant-design/cssinjs package inside the app is the reason why this issue occurs. What do you think about this?

[ScriptedAlchemy]

Yes. Share it and it works again.