Unable to use MUI icons with Remix

[antoinech2]

Reproduction

• Create blank project with npx create-remix@latest
• Install MUI dependencies : npm install @mui/material @emotion/react @emotion/styled, npm install @mui/icons-material
• Import an icon in _index.tsx : import AccessibilityIcon from '@mui/icons-material/Accessibility';
• Render the icon in JSX
• Run npm run dev

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 1.94 GB / 15.39 GB
  Binaries:
    Node: 20.12.2 - ~\Documents\node-v20.12.2-win-x64\node.EXE
    npm: 10.7.0 - ~\Documents\node-v20.12.2-win-x64\npm.CMD
  Browsers:
    Edge: Chromium (124.0.2478.80)
    Internet Explorer: 11.0.22621.1

Used Package Manager

npm

Expected Behavior

Component should render correctly

Actual Behavior

Import is not working.
Error :

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/home/projects/remix-run-remix-yxktta/node_modules/react-dom/cjs/react-dom-server.node.development.js:6120:9)
    at renderNodeDestructiveImpl (/home/projects/remix-run-remix-yxktta/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/home/projects/remix-run-remix-yxktta/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderNode (/home/projects/remix-run-remix-yxktta/node_modules/react-dom/cjs/react-dom-server.node.development.js:6336:12)
    at renderChildrenArray (/home/projects/remix-run-remix-yxktta/node_modules/react-dom/cjs/react-dom-server.node.development.js:6288:7)
    at renderNodeDestructiveImpl (/home/projects/remix-run-remix-yxktta/node_modules/react-dom/cjs/react-dom-server.node.development.js:6218:7)
    at renderNodeDestructive (/home/projects/remix-run-remix-yxktta/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderNode (/home/projects/remix-run-remix-yxktta/node_modules/react-dom/cjs/react-dom-server.node.development.js:6336:12)
    at renderHostElement (/home/projects/remix-run-remix-yxktta/node_modules/react-dom/cjs/react-dom-server.node.development.js:5708:3)
    at renderElement (/home/projects/remix-run-remix-yxktta/node_modules/react-dom/cjs/react-dom-server.node.development.js:6029:5)

I have tried absolutely everything for hours and look up for dozens of forums but I can't find a solution...

[antoinech2]

PS : I have found possible working solutions with Vite, but I'm using Classic Remix Compiler