Lext•2y ago

How to use MUI in Fresh?

Is there a way to use Material UI components library in Fresh? Here is the code I tried:

import { Button } from "https://esm.sh/@mui/material@5.11.3";

export default function MyApp() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

import { Button } from "https://esm.sh/@mui/material@5.11.3";

export default function MyApp() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

And it gives me this error:

An error occurred during route handling or page rendering. Error: [object Object] is not a valid HTML tag name in <[object Object] variant="contained">
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:2370)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:2689)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at q (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:316)
    at realRender (https://deno.land/x/fresh@1.1.2/src/server/render.ts:167:16)
    at Object.render (https://deno.land/x/fresh@1.1.2/src/server/render.ts:185:7)

An error occurred during route handling or page rendering. Error: [object Object] is not a valid HTML tag name in <[object Object] variant="contained">
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:2370)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:2689)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at q (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:316)
    at realRender (https://deno.land/x/fresh@1.1.2/src/server/render.ts:167:16)
    at Object.render (https://deno.land/x/fresh@1.1.2/src/server/render.ts:185:7)

You can use MUI in Preact: https://github.com/mui/material-ui/tree/master/examples/preact But I don't know how to use it in Fresh.

GitHub

material-ui/examples/preact at master · mui/material-ui

MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design. - material-ui/examples/preact at master · mui/material-ui

1 Reply

Lext•2y ago

I found a Demo project that renders correctly: https://github.com/irbull/fresh-mui/blob/main/islands/Demo.tsx But it doesn't actually work as expected...

GitHub

fresh-mui/Demo.tsx at main · irbull/fresh-mui

An example that uses Fresh and MUI. Contribute to irbull/fresh-mui development by creating an account on GitHub.