ARTICLE AD BOX
When using rspack with typescript and Material UI (MUI) with React to run in development mode, the following error is thrown:
_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)
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 as expected.
I've created an example project here:
https://github.com/AMI3GOLtd/hmr-error
Code to recreate. Expectation is that the browser renders the text "Beef" within a MUI Paper component without showing an error:
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": "[email protected]" }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')], }, });Debug data:
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