Not working with mui icons 6

[cwagner22]

After updating to mui 6, I get

Directory import 'node_modules/@mui/material/utils' is not supported resolving ES modules imported from node_modules/@mui/icons-material/esm/utils/createSvgIcon.js
Did you mean to import "@mui/material/node/utils/index.js"?

It seems to be due to https://github.com/mui/material-ui/pull/43624 which uses ESM by default. I'm thinking it's causing an issue because @mui/material doesn't use ESM yet. I've had this issue with every SSR framework I tried. I'm logging it here in case there is a solution...

From node_modules/@mui/icons-material/package.json:

  "exports": {
    ".": {
      "types": "./index.d.ts",
      "import": "./esm/index.js",
      "require": "./index.js"
    },
    "./*": {
      "types": "./*.d.ts",
      "import": "./esm/*.js",
      "require": "./*.js"
    },
    "./esm/*": "./esm/*.js",
    "./esm/*.js": "./esm/*.js"
  },

If I remove exports it works, or if I replace "import": "./esm/index.js", by "import": "./index.js",

It also works if I add

  ssr: {
    noExternal: ["@mui/icons-material"],
  },

to vite.config.ts but I think this will increase my bundle size.

[khera]

Using the noExternal configuration above lets it work in development mode. Once you build and deploy it will fail to load many other parts of MUI, in an endless and ultimately unfixable cycle of adding more and more of the MUI parts to the noExternal setting.

Someone suggesting using Vite's alias feature, but that doesn't seem applicable, or I couldn't figure out exactly what they meant.