Error shown when using rspack and module federation

[AMI3GOLtd]

Steps to reproduce

When using rspack with typescript and Material UI (MUI) with React to run in development mode

Example project here:
https://github.com/AMI3GOLtd/hmr-error

Code to recreate:

App.tsx

import * as React from 'react';
import ReactDOM from 'react-dom/client';
import { Paper } from '@mui/material';

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement,
);

root.render(<Beef />);

function Beef() {
	return <Paper>Beef</Paper>;
}

package.json

{
    "name": "hmr-error",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "rspack serve --config scripts/rspack/rspack.dev.ts"
    },
    "dependencies": {
        "@emotion/react": "^11.14.0",
        "@emotion/styled": "^11.14.1",
        "@mui/material": "^7.3.5",
        "react": "^19.2.0",
        "react-dom": "^19.2.0"
    },
    "devDependencies": {
        "@module-federation/enhanced": "^0.21.6",
        "@rspack/cli": "^1.6.5",
        "@rspack/core": "^1.6.5",
        "@rspack/plugin-react-refresh": "^1.5.3",
        "@types/react": "^19.2.7",
        "@types/react-dom": "^19.2.3",
        "@types/react-refresh": "^0.14.7",
        "react-refresh": "^0.18.0",
        "typescript": "^5.9.3",
        "webpack-merge": "^6.0.1"
    },
    "packageManager": "yarn@4.12.0"
}

moduleFederationConfig.ts

const deps = require('../../package.json').dependencies;

export const mfConfig = {
    name: 'CoreUIComponents',
    filename: 'remoteEntry.js',
    exposes: {
        './components': './src/components',
    },
    shared: {
        ...deps,
        react: {
            singleton: true,
            requiredVersion: deps.react,
        },
        'react-dom': {
            singleton: true,
            requiredVersion: deps['react-dom'],
        }
    },
};

rspack.common.ts

import * as path from 'node:path';
import { rspack } from '@rspack/core';
import { ReactRefreshRspackPlugin } from "@rspack/plugin-react-refresh";
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
import { mfConfig } from '../moduleFederation/moduleFederationConfig';

// Target browsers, see: https://github.com/browserslist/browserslist
const targets = ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'];

export const getCommonConfig = (params?: {
	isDev?: boolean;
	isRefreshPluginSupressed?: boolean;
}) => {
	const isDev = params?.isDev ?? process.env.NODE_ENV === 'development';

	return {
		entry: {
			main: './src/index.ts',
		},
		resolve: {
			extensions: ['...', '.ts', '.tsx', '.jsx'],
		},
		output: {
			uniqueName: 'CoreUIComponents',
			path: path.resolve(__dirname, '../../dist/app'),
		},
		experiments: {
			css: true,
		},
		module: {
			rules: [
				{
					test: /\.(png|jpe?g|gif|jp2|webp)$/,
					type: 'asset',
				},
				{
					test: /\.(jsx?|tsx?)$/,
					use: [
						{
							loader: 'builtin:swc-loader',
							options: {
								jsc: {
									parser: {
										syntax: 'typescript',
										tsx: true,
									},
									transform: {
										react: {
											runtime: 'automatic',
											development: isDev,
											refresh: isDev,
										},
									},
								},
								env: { targets },
							},
						},
					],
				},
			],
		},
		plugins: [
			new rspack.HtmlRspackPlugin({
				template: './public/index.html',
			}),
			new ModuleFederationPlugin(mfConfig),
			isDev ? new ReactRefreshRspackPlugin() : null,
		].filter(Boolean),
	};
};

rspack.dev.ts

import * as path from 'node:path';
const { merge } = require('webpack-merge');
import { getCommonConfig } from './rspack.common';

const commonConfig = getCommonConfig();

const port = 3001;

module.exports = merge(commonConfig, {
    mode: 'development',
    dev: {
        hmr: false,
        liveReload: false,
    },
    devServer: {
        port: port,
        open: true,
        hot: false,
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
        watchFiles: [path.resolve(__dirname, 'src')],
    },
});

To run

yarn install
yarn start

It seems to happen as soon as a MUI component is used. If you remove the reference to Paper in App.tsx and return simple fragment (e.g., <>Beef</>), it works.

Current behavior

Error shown when launching in browser:

_emotion_styled__rspack_import_0 is not a function TypeError: _emotion_styled__rspack_import_0 is not a function at styled (http://localhost:3001/vendors-node_modules_mui_material_esm_index_js.js:67471:27) at styled (http://localhost:3001/vendors-node_modules_mui_material_esm_index_js.js:70010:89) at ./node_modules/@mui/material/esm/SvgIcon/SvgIcon.js (http://localhost:3001/vendors-node_modules_mui_material_esm_index_js.js:49049:74) at _webpack_require_ (http://localhost:3001/main.js:8880:30) at ./node_modules/@mui/material/esm/utils/createSvgIcon.js (http://localhost:3001/vendors-node_modules_mui_material_esm_index_js.js:66436:55) at _webpack_require_ (http://localhost:3001/main.js:8880:30) at ./node_modules/@mui/material/esm/utils/index.js (http://localhost:3001/vendors-node_modules_mui_material_esm_index_js.js:66543:55) at _webpack_require_ (http://localhost:3001/main.js:8880:30) at ./node_modules/@mui/material/esm/index.js (http://localhost:3001/vendors-node_modules_mui_material_esm_index_js.js:60712:53) at _webpack_require_ (http://localhost:3001/main.js:8880:30)

Expected behavior

Page should load and show the text "Beef"

Context

The example would be used in a micro UI environment

Your environment

System:
OS: Windows 11 10.0.26220
Binaries:
Node: 22.21.0 - C:\Program Files\nodejs\node.EXE
npm: 10.9.4 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: 142.0.7444.176
Edge: Chromium (140.0.3485.11)
npmPackages:
@emotion/react: ^11.14.0 => 11.14.0
@emotion/styled: ^11.14.1 => 11.14.1
@mui/core-downloads-tracker: 7.3.5
@mui/material: ^7.3.5 => 7.3.5
@mui/private-theming: 7.3.5
@mui/styled-engine: 7.3.5
@mui/system: 7.3.5
@mui/types: 7.4.8
@mui/utils: 7.3.5
@types/react: ^19.2.7 => 19.2.7
react: ^19.2.0 => 19.2.0
react-dom: ^19.2.0 => 19.2.0
typescript: ^5.9.3 => 5.9.3

Search keywords: rspack webpack module federation

[mj12albert]

@AMI3GOLtd I'm not sure if this is the whole issue, but Material UI (and possibly emotion) need to be added here as singleton as well https://github.com/AMI3GOLtd/hmr-error/blob/6f9cc6beddca92d3242b488dd34dcbea8d6d464b/scripts/moduleFederation/moduleFederationConfig.ts#L9-L19

[AMI3GOLtd]

@AMI3GOLtd I'm not sure if this is the whole issue, but Material UI (and possibly emotion) need to be added here as singleton as well https://github.com/AMI3GOLtd/hmr-error/blob/6f9cc6beddca92d3242b488dd34dcbea8d6d464b/scripts/moduleFederation/moduleFederationConfig.ts#L9-L19

Hi @mj12albert,
Thanks for the reply.
Adding the config didn't work but it did point me in the right direction. I'm adding all the dependencies from package.json using ...deps:

shared: {
    ...deps,
    react: {
        singleton: true,
        requiredVersion: deps.react,
    },
    'react-dom': {
        singleton: true,
        requiredVersion: deps['react-dom'],
    }
}

Removing that brought it to life!

I'm going to do more investigation and will update here when I know more