New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using Material UI / Preact compatible component library #411
Comments
https://mui.com/material-ui/guides/server-rendering/ |
To my understanding this extra configuration is a bonus to make sure there is no flickering since we re-render on the client side - so I assume purely using an island should also work. However, I did give this a go, but this feels very non-standard and I was unsure how to inject html and css. I end-up getting import { h } from "preact";
import {CssBaseline} from '@mui';
import { ThemeProvider } from 'mui/styles';
import createCache from 'https://esm.sh/@emotion/cache';
import { CacheProvider } from 'https://esm.sh/@emotion/react';
import createEmotionServer from 'https://esm.sh/@emotion/server/create-instance';
import render from 'preact-render-to-string';
import theme from './theme.ts';
export function createEmotionCache() {
return createCache({ key: 'css' });
}
export function serverMUI(App: any) {
const cache = createEmotionCache();
const { extractCriticalToChunks, constructStyleTagsFromChunks } =
createEmotionServer(cache);
// Render the component to a string.
const html: string = render(
<CacheProvider value={cache}>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<App />
</ThemeProvider>
</CacheProvider>
);
// Grab the CSS from emotion
const emotionChunks = extractCriticalToChunks(html);
const emotionCss: string = constructStyleTagsFromChunks(emotionChunks);
return <div dangerouslySetInnerHTML={{__html: emotionCss.concat(html)}}/>
}
export * from "mui"; For any component that I want rendered with MUI I just wrap it in a serverMUI call. |
Actually I realise the better way to do the above is using the request handlers instead but I still get the same error. |
maybe try adding "react": "preact " in import_map ?
|
that isn't a valid map |
The approach here might work for you. |
I got it to work by adding this to the |
Thanks guys that works well ! |
Can you share your final working code? I also want to implement Material UI. I tried using a request handler inside An error occured during route handling or page rendering. TypeError: Cannot read properties of undefined (reading 'context')
at Module.w (https://esm.sh/v86/preact@10.9.0/X-YS9yZWFjdC9qc3gtcnVudGltZTpwcmVhY3QvY29tcGF0L2pzeC1ydW50aW1lLHJlYWN0OnByZWFjdC9jb21wYXQ/deno/hooks.js:2:1132) |
@marsidev I had the same issue, updating the {
"imports": {
"$fresh/": "https://deno.land/x/fresh@1.1.2/",
"preact": "https://esm.sh/preact@10.11.0",
"preact/": "https://esm.sh/preact@10.11.0/",
"preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.4",
"@preact/signals": "https://esm.sh/*@preact/signals@1.0.3",
"@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.0.1",
"twind": "https://esm.sh/twind@0.16.17",
"twind/": "https://esm.sh/twind@0.16.17/",
"@mui/material": "https://esm.sh/@mui/material@^5.10.17?alias=react:preact/compat,react/jsx-runtime:preact/compat/jsx-runtime&deps=preact@10.11.0"
}
} |
see also: #363 |
Hi,
I was trying to include Material UI since it is compatible with preact:
https://twitter.com/preactjs/status/1152267975078154240?lang=en-GB
And including MUI core as a dependency as in normal deno: denoland/deno#7282
However I run into
[object Object] is not a valid HTML tag name
: denoland/deno#7282 when doing it both as a route and as an island.Would in general all the packages in https://preactjs.com/about/libraries-addons/ technically be usable with Fresh ?
The text was updated successfully, but these errors were encountered: