Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] Upgrade to MUI v6 causes error #587

Closed
7system7 opened this issue Oct 21, 2024 · 4 comments · May be fixed by #594
Closed

[Bug] Upgrade to MUI v6 causes error #587

7system7 opened this issue Oct 21, 2024 · 4 comments · May be fixed by #594

Comments

@7system7
Copy link

API Platform version(s) affected: 4.0.4

Description
If I upgrade to the latest 6.x version of MUI, everything works as expected, except the @mui/icons-material.

> vite

Forced re-optimization of dependencies

  VITE v5.4.9  ready in 121 ms

  ➜  Local:   http://localhost:5173/build/
  ➜  Network: use --host to expose
  ➜  Vite ⚡️ Symfony: vite-plugin-symfony: v7.0.4, pentatrion/vite-bundle: v7.0.4
  ➜  press h + enter to show help
✘ [ERROR] Could not resolve "@mui/icons-material/ExpandMore.js"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@types+react@18_ora2dcwvvhaybftmxcjt7n7jb4/node_modules/@api-platform/admin/lib/layout/Error.js:15:27:
      15 │ ...eIcon from '@mui/icons-material/ExpandMore.js'; // eslin...
         ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The module "./esm/ExpandMore.js.js" was not found on the file system:

    node_modules/@mui/icons-material/package.json:59:16:
      59 │       "import": "./esm/*.js",
         ╵                 ~~~~~~~~~~~~

  You can mark the path "@mui/icons-material/ExpandMore.js" as external
  to exclude it from the bundle, which will remove this error and leave
  the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@mui/icons-material/History.js"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@types+react@18_ora2dcwvvhaybftmxcjt7n7jb4/node_modules/@api-platform/admin/lib/layout/Error.js:16:24:
      16 │ ...ryIcon from '@mui/icons-material/History.js'; // eslint-...
         ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The module "./esm/History.js.js" was not found on the file system:

    node_modules/@mui/icons-material/package.json:59:16:
      59 │       "import": "./esm/*.js",
         ╵                 ~~~~~~~~~~~~

  You can mark the path "@mui/icons-material/History.js" as external to
  exclude it from the bundle, which will remove this error and leave the
  unresolved path in the bundle.

✘ [ERROR] Could not resolve "@mui/icons-material/Refresh.js"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@types+react@18_ora2dcwvvhaybftmxcjt7n7jb4/node_modules/@api-platform/admin/lib/layout/Error.js:17:24:
      17 │ ...shIcon from '@mui/icons-material/Refresh.js'; // eslint-...
         ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The module "./esm/Refresh.js.js" was not found on the file system:

    node_modules/@mui/icons-material/package.json:59:16:
      59 │       "import": "./esm/*.js",
         ╵                 ~~~~~~~~~~~~

  You can mark the path "@mui/icons-material/Refresh.js" as external to
  exclude it from the bundle, which will remove this error and leave the
  unresolved path in the bundle.

How to reproduce

  1. Install the latest version of Api platform and the @api-platform/admin
  2. Install these
  • react-admin ^5.3.0
  • @mui/icons-material ^6.1.4
  • @mui/lab 6.0.0-beta.12
  • @mui/material ^6.1.4
  • @mui/system ^6.1.4
  • @mui/x-charts ^7.21.0
  • @mui/x-date-pickers ^7.21.0
  1. This config drops the error above during the compile.

Possible Solution
Downgrade the @mui/icons-material to the latest v5

Additional Context
@7system7 7system7 changed the title [BUG] Upgrade to MUI v6 causes error [Bug] Upgrade to MUI v6 causes error Oct 21, 2024
@fzaninotto
Copy link
Contributor

API Platform Admin uses react-admin, which isn't compatible with MUI V6 for now.

See rationale at marmelab/react-admin#10167

We recommend that you keep with MUI v5.

@djhi
Copy link
Contributor

djhi commented Jan 24, 2025

react-admin 5.5 has been released and support react 19, react-router v7 and MUI 6 🎉

@djhi djhi closed this as completed Jan 24, 2025
@7system7
Copy link
Author

Image

@xrogers
Copy link

xrogers commented Jan 27, 2025

Hey, it is still broken - on lines 15,16,17 of @api-platform/admin/lib/layout/Error.js .js needs to be removed to compile properly

xrogers added a commit to xrogers/admin that referenced this issue Jan 27, 2025
@xrogers
Resolve issues with MUI 6
d75b456 
See api-platform#587
@xrogers xrogers mentioned this issue Jan 27, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Resolve issues with MUI 6 xrogers/admin
4 participants
@fzaninotto @djhi @xrogers @7system7