_emotion_styled__rspack_import_0 is not a function

4 days ago 9
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)

I've created an example project here:
https://github.com/AMI3GOLtd/hmr-error

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 components/index.tsx and return simple fragment (e.g., export function Beef() { return <>Beef</>; }), it works
Error can be seen in the browser window.

Any help is appreciated!

Read Entire Article