[BUG] ERR_UNSUPPORTED_DIR_IMPORT when import @refinedev/mui

[hongfanmeng]

Describe the bug

I create a remix-spa app by pnpx create-remix@latest --template remix-run/remix/templates/spa

Then, I add some refine components to root.tsx

// root.tsx
import { Refine } from "@refinedev/core";
import { RefineSnackbarProvider } from "@refinedev/mui";


export default function App() {
  return (
    <RefineSnackbarProvider>
      <Refine>
        <Outlet />
      </Refine>
    </RefineSnackbarProvider>
  );
}

it raise an error

[vite] Internal server error: Directory import '<repo path>/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emotion+style_n4nk7wpf5mrcjlykwo4hytjbzm/node_modules/@mui/material/Box' is not supported resolving ES modules imported from <repo path>/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emotion+style_n4nk7wpf5mrcjlykwo4hytjbzm/node_modules/@refinedev/mui/dist/index.mjs
Did you mean to import "@mui/material/node/Box/index.js"?
      at finalizeResolution (node:internal/modules/esm/resolve:259:11)
      at moduleResolve (node:internal/modules/esm/resolve:933:10)
      at defaultResolve (node:internal/modules/esm/resolve:1157:11)
      at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
      at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
      at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
      at link (node:internal/modules/esm/module_job:86:36)

Steps To Reproduce

1. create remix-spa app by pnpx create-remix@latest --template remix-run/remix/templates/spa
2. install @refinedev/core, @refinedev/mui, @mui/material
3. import @refinedev/mui

Expected behavior

no error

Packages

• @refinedev/core 4.49.2
• @refinedev/mui 5.15.1
• @mui/material 5.15.19

Additional Context

No response

[BatuhanW]

Hey @hongfanmeng it's a known issue. Please check our release notes here: https://github.com/refinedev/refine/releases/tag/%40refinedev%2Fmui%405.14.6

In Remix projects using @refinedev/mui you may encounter issues due to ESM issues from Material UI packages, please refer to this issue if you have any problems related to this: mui/material-ui#39765

https://github.com/mui/material-ui/issues/39765