Accordion unresponsive when imported asimport Accordion from @mui/material/Accordion via esm.sh #44649
Open
Description
Steps to reproduce
Steps:
- Open this link to live example: https://idx.google.com/mui-accordion-3766562 (first time using idx, not sure whether this link works), here stackblitz: https://stackblitz.com/edit/stackblitz-starters-rihbql?file=index.html
- See that the Accordion does not work
- Change the Accordion import lines inside the script tag to import from the global
@mui/materialinstead, reload, and see that it works.
Here a copy of the standalone html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#2a2928">
<meta name="color-scheme" content="light dark">
<script type="importmap">
{
"imports": {
"@mui/icons-material": "https://esm.sh/@mui/icons-material@5.15.15?dev&external=react,react-dom&target=es2020&keep-names",
"@mui/icons-material/": "https://esm.sh/@mui/icons-material@5.15.15&dev&external=react,react-dom&target=es2020&keep-names/",
"@mui/material": "https://esm.sh/@mui/material@5.15.15?dev&external=react,react-dom&target=es2020",
"@mui/material/": "https://esm.sh/@mui/material@5.15.15&dev&external=react,react-dom&target=es2020/",
"htm": "https://esm.sh/htm@3.1.1",
"htm/preact": "https://esm.sh/htm@3.1.1/preact?external=preact",
"preact": "https://esm.sh/preact@10.13.2?target=es2020",
"preact/hooks": "https://esm.sh/preact@10.13.2/hooks?target=es2020",
"react": "https://esm.sh/preact@10.13.2/compat?target=es2020",
"react-dom": "https://esm.sh/preact@10.13.2/compat?target=es2020",
"react/jsx-runtime": "https://esm.sh/preact@10.13.2/jsx-runtime?target=es2020"
}
}
</script>
</head>
<body>
<div id="app"></div>
<script type="module">
// preact to its best - we can create simple html pages which are completely self-containing
import { render } from 'preact'
import { html } from 'htm/preact'
import Accordion from '@mui/material/Accordion'
import AccordionSummary from '@mui/material/AccordionSummary'
import AccordionDetails from '@mui/material/AccordionDetails'
// alternatively, importing it from @mui/material directly works
// import {Accordion, AccordionSummary, AccordionDetails} from "@mui/material"
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
export function App() {
return html`
<div>
<${Accordion}
>
<${AccordionSummary}
expandIcon=${html`<${ExpandMoreIcon} />`}
>
hello world
<//>
<${AccordionDetails} >
nice stuff
<//>
<//>
<${Accordion}
>
<${AccordionSummary}
expandIcon=${html`<${ExpandMoreIcon} />`}
>
and more
<//>
<${AccordionDetails} >
more stuff
<//>
<//>
</div>
`;
}
render(html`<${App} />`, document.getElementById('app'));
</script>
</body>
</html>Current behavior
Accordion is frozen with the one import style
Expected behavior
Accordion behaves identical on both imports
Context
This uses preact and importmaps via esm.sh, making it possible to create standalone html apps with material ui
Your environment
see context above, especially the importmap in the html file
Search keywords: Accordion, esm.sh, importmaps, preact
Metadata
Assignees
Labels
Projects
Status
Selected