rival-black•6h ago

@mui/material/Grid2 error when upgrading to v5

I'm getting this error after updating everything:

✘ [ERROR] Could not resolve "@mui/material/Grid2"

    node_modules/.pnpm/@refinedev+mui@7.0.0_4xouxjtjsngylaxoth72bnvlwa/node_modules/@refinedev/mui/dist/index.mjs:1199:17:
      1199 │ import Grid from "@mui/material/Grid2";
           ╵                  ~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Could not resolve "@mui/material/Grid2"

    node_modules/.pnpm/@refinedev+mui@7.0.0_4xouxjtjsngylaxoth72bnvlwa/node_modules/@refinedev/mui/dist/index.mjs:1199:17:
      1199 │ import Grid from "@mui/material/Grid2";
           ╵                  ~~~~~~~~~~~~~~~~~~~~~

I'm sure I updated @refinedev/mui so I don't know what's going on.

5 Replies

kapa.ai•6h ago

Hi @Rikas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This error happens when MUI v6+ renamed the Grid v2 export. In v6/7, Grid v2 is no longer available at @mui/material/Grid2; you should import it from the package root: - For MUI v6+: import { Grid2 as Grid } from "@mui/material"; Refine’s MUI v7 expects the MUI v6/7 alignment shown in the migration guide (refine mui 7.x with MUI 6.x/X Data Grid 7.x). If your project still has code (or a dependency) importing "@mui/material/Grid2", you’ll see this resolve error. Update those imports to the new API and ensure versions are aligned: - @refinedev/mui 7.x - @mui/material 6.x - @mui/x-data-grid 7.x Version alignment table: @refinedev/mui 7.x ↔ MUI 6.x/X Data Grid 7.x. [MUI v6/v7 guide] [4→5 package versions] If you copied code from older docs/blogs that use Grid2 default import, replace it with the new named import as above. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6h ago

<@99162486523060224> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

rival-blackOP•6h ago

@kapa.ai I would love if you could help here

kapa.ai•6h ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- It looks like something in your app (or cache) is still importing Grid v2 with the old path "@mui/material/Grid2". With MUI v6+, Grid v2 is exposed as a named export from @mui/material, not a default import from Grid2. What to do: - Ensure version alignment: - @refinedev/mui: 7.x - @mui/material: 6.x - @mui/x-data-grid: 7.x. [MUI v6/v7 guide] - Update any imports to: import { Grid2 as Grid } from "@mui/material"; Remove usages of import Grid from "@mui/material/Grid2". - If the error points into node_modules/@refinedev/mui/dist/index.mjs, clear lockfile and cache, then reinstall to get the corrected build: - delete node_modules and lockfile - reinstall - ensure your @mui/material is 6.x as per the table. [MUI v6/v7 guide; 4→5 versions] If you still hit resolution issues in tests/Vite due to MUI’s ESM quirks, inline @refinedev/mui in Vitest config as a workaround:

test: {
  server: { deps: { inline: ["@refinedev/mui"] } }
}

test: {
  server: { deps: { inline: ["@refinedev/mui"] } }
}

This is a known MUI ESM interoperability issue. [ERR_UNSUPPORTED_DIR_IMPORT] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6h ago

<@99162486523060224> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

@mui/material/Grid2 error when upgrading to v5

Did you find this page helpful?