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 opened this issue · 5 comments
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/@api-platform+admin@3.4.3_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
After an update I've got exactly the same problem, any progress on this yet?
Did you manage to resolve @EnterVPL ?
@ferriss
I just downloaded other api platform demo and I replaced PWA. After this performance yet pnpm install and update
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.
In our case, we added the following patch to fix this issue until it is fixed in a new release:
- Create a file
pwa/patches/@api-platform__admin@3.4.3.patch
- 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
- In your package.json, add the patch:
"pnpm": {
"patchedDependencies": {
"@api-platform/admin@3.4.3": "patches/@api-platform__admin@3.4.3.patch"
}
}
- run
pnpm i
again
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 :)