search

refinedev / refine

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
https://refine.dev
MIT License
25.95k stars 1.96k forks source link

[BUG] ERR_UNSUPPORTED_DIR_IMPORT when import @refinedev/mui #6007

Closed hongfanmeng closed 4 weeks ago

hongfanmeng commented 4 weeks ago

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/@refinedev+mui@5.15.1_@emotion+react@11.11.4_@types+react@18.3.3_react@18.3.1__@emotion+style_n4nk7wpf5mrcjlykwo4hytjbzm/node_modules/@mui/material/Box' is not supported resolving ES modules imported from <repo path>/node_modules/.pnpm/@refinedev+mui@5.15.1_@emotion+react@11.11.4_@types+react@18.3.3_react@18.3.1__@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

Additional Context

No response

BatuhanW commented 4 weeks ago

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