CJS/ESM Issue with @mui as nested dependency

[MikaelColliander]

Hi, any help in resolving my issue would be deeply appreciated.

With the plugin vite-plugin-cjs-interop I am able to use @mui/material within my Vike application code, directly. As suggested here: https://github.com/brillout/vike-with-mui/blob/main/vite.config.ts

However, I use packages that in turn depend on @mui packages which yields the CJS/ESM Issue error when running npm run dev.

Here is a reproduction repo:
https://github.com/MikaelColliander/vike-test/blob/main/layouts/LayoutDefault.tsx

Here is the relevant output:

node_modules/@sj-ab/component-library.ui.theme-provider/ThemeProvider.tsx:2 import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles"; ^ SyntaxError: The requested module '@mui/material/styles' does not provide an export named 'ThemeProvider' at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21) at ModuleJob.run (node:internal/modules/esm/module_job:190:5) ┌────────────────────────────────────────────────────────────────────────────────┐ │ The error seems to be a CJS/ESM issue, see https://vike.dev/broken-npm-package │ └────────────────────────────────────────────────────────────────────────────────┘

[MikaelColliander]

When adding to vite.config

ssr: { noExternal: true, }

There is another error:

ReferenceError: exports is not defined at /Users/mikaelcolliander/Development/my-app/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/server.node.js:12:1 at instantiateModule (file:///Users/mikaelcolliander/Development/my-app/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-C-KAszbv.js:55006:15)

[brillout]

Can you make it a minmal reproduction?

[MikaelColliander]

Thanks for taking time with this. I was thinking this might serve as a minimal reproduction, will it suffice?
https://github.com/MikaelColliander/vike-test/tree/main

[brillout]

Minimal pacage.json#dependencies