Preact showcases its compatibility with HTM for a no-build setup, which has been working seamlessly on my phone as Vite was causing issues due to symlinks. Learn more here.
MUI provides guidance on how to install and use it with Preact, although not specifically with HTM for a no-build setup. Find the details at https://mui.com/material-ui/getting-started/
I attempted to import using
import { Button } from '@mui/material/Button';I tried importing without brackets or directly importing the file like this
import { Button } from '../node_modules/@mui/material/Button.js';However, the console still displays...
material-ui.development.js:1848 Uncaught TypeError: Cannot read properties of undefined (reading 'useLayoutEffect')
at material-ui.development.js:1848:74
...and several similar error messages.
How can I make this work with both Preact and htm for a no-build setup?
Below is my code snippet...
My package.json:
{
"name": "project",
"private": true,
"version": "0.001",
"type": "module",
"scripts": {},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.19",
"@testing-library/jest-dom": "latest",
"@testing-library/react": "latest",
"@testing-library/user-event": "latest",
"htm": "^3.1.1",
"preact": "^10.22.0",
"react-scripts": "^5.0.0"
}
}
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Site title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, interactive-widget=resizes-content">
<script src="js/standalone.module.js" type="module"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="components/App.js"></script>
</body>
</html>
My App.js:
import { html, render } from '../js/standalone.module.js';
import { Button } from '@mui/material/Button';
function ButtonUsage() {
return html`
<${Button} variant="contained">Hello world<//>
`;
}
render(html`<${ButtonUsage} />`, document.getElementById('root'));