Using Material UI / Preact compatible component library

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: https://github.com/denoland/deno/issues/7282

However I run into [object Object] is not a valid HTML tag name: https://github.com/denoland/deno/issues/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 ?

[gbahamondezc]

@marsidev I had the same issue, updating the preact deps version in the @mui/material import line to the same than fresh is using 10.11.0 fixed the issue for me, example.

{
  "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"
  }
}

[SalvadorLekan]

I got it to work by adding this to the import_map.json. (I tested with this example from MUI’s Website and I got an alert in the browser) "@mui/material": "https://esm.sh/@mui/material@5.8.7?alias=react:preact/compat,react/jsx-runtime:preact/compat/jsx-runtime&deps=preact@10.8.1"