SyntaxError: Named export 'styled' not found. The requested module '@mui/material/styles/index.js' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

[EnterVPL]

API Platform version(s) affected: '@api-platform/admin': ^3.4.3

Description
I trying run auth on admin but I got error:

Server Error
SyntaxError: Named export 'styled' not found. The requested module '@mui/material/styles/index.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@mui/material/styles/index.js';
const { styled } = pkg;

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///srv/app/node_modules/.pnpm/@[email protected]_zula6vjvt3wdocc4mwcxqa6nzi/node_modules/@api-platform/admin/lib/layout/Error.js (15)
ModuleJob._instantiate
node:internal/modules/esm/module_job (124:21)
async ModuleJob.run
node:internal/modules/esm/module_job (190:5)

How to reproduce
I just using code from docs: https://api-platform.com/docs/admin/authentication-support/

Possible Solution
I don't now. Frontend has never been my strong suit

Additional Context
Using this:

import React from 'react';
import ReactDOM from 'react-dom';
import { HydraAdmin } from '@api-platform/admin';

const Admin = () => <HydraAdmin entrypoint="https://demo.api-platform.com" />;

ReactDOM.render(<Admin />, document.getElementById('root'));

I am getting exactly the same error.

I using official docker images: https://github.com/api-platform/api-platform

[ferriss]

After an update I've got exactly the same problem, any progress on this yet?
Did you manage to resolve @EnterVPL ?

[EnterVPL]

@ferriss
I just downloaded other api platform demo and I replaced PWA. After this performance yet pnpm install and update

[KDederichs]

Same issue here, it happens after you install the react-admin dependency yourself to start customizing it...
@alanpoulain it would be neat if you could take a look at this.

[ltcmdrkeen]

In our case, we added the following patch to fix this issue until it is fixed in a new release:

1. Create a file pwa/patches/@[email protected]
2. Paste the following patch content:

diff --git a/lib/layout/Error.js b/lib/layout/Error.js
index ff42479b1eb353c1e3e9fb118f2e340bbd5556fc..70f45adf58814e1d65a085b8a38725bb794e45af 100644
--- a/lib/layout/Error.js
+++ b/lib/layout/Error.js
@@ -11,8 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { Title, useTranslate } from 'react-admin';
-import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Typography, } from '@mui/material';
-import { styled } from '@mui/material/styles/index.js'; // eslint-disable-line import/extensions
+import { styled, Accordion, AccordionDetails, AccordionSummary, Box, Button, Typography, } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore.js'; // eslint-disable-line import/extensions
 import HistoryIcon from '@mui/icons-material/History.js'; // eslint-disable-line import/extensions
 import RefreshIcon from '@mui/icons-material/Refresh.js'; // eslint-disable-line import/extensions

3. In your package.json, add the patch:

"pnpm": {
    "patchedDependencies": {
      "@api-platform/[email protected]": "patches/@[email protected]"
    }
  }

4. run pnpm i again

[shanginn]

same issue, even tried uninstalling react-admin and mui/material, nothing helped except the @ltcmdrkeen method.
genius! I'm truly amazed with this ability to patch deps like this :)