api-platform / admin

A beautiful and fully-featured administration interface builder for hypermedia APIs
https://api-platform.com/docs/admin/
MIT License
482 stars 131 forks source link

[Bug] Upgrade to MUI v6 causes error #587

Open 7system7 opened 2 days ago

7system7 commented 2 days ago

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/@api-platform+admin@4.0.1_@mui+utils@6.1.4_@types+react@18.3.11_react@18.3.1__@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/@api-platform+admin@4.0.1_@mui+utils@6.1.4_@types+react@18.3.11_react@18.3.1__@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/@api-platform+admin@4.0.1_@mui+utils@6.1.4_@types+react@18.3.11_react@18.3.1__@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
  3. This config drops the error above during the compile.

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

Additional Context

fzaninotto commented 1 day ago

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

See rationale at https://github.com/marmelab/react-admin/issues/10167

We recommend that you keep with MUI v5.