Giters

developit / htm

Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Difficulty combining htm with preact and material ui

schlichtanders opened this issue · comments

commented

Hi there,
I am using preact and htm already and would like to add material ui

here a minimal example

import {render, h} from "https://esm.sh/v66/preact@10.6.6?target=es2020"
import htm from "https://esm.sh/v66/htm@3.1.0?target=es2020"
const html = htm.bind(h)

import Button from "https://esm.sh/v66/@mui/material@5.11.15/Button?target=es2020"

render(html`<${Button} variant="contained">Hello World</Button>`, document.body)

this produces the following error

create-context.js:3 Uncaught TypeError: Cannot read properties of undefined (reading '__k')
    at oe (create-context.js:3:16)
    at index.js:8:1

when using Button somewhere deeper inside nested html preact components, I get the following error

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('[object Object]') is not a valid name.
    at ne (https://esm.sh/stable/preact@10.6.6/es2020/preact.mjs:2:6758)
    at M (https://esm.sh/stable/preact@10.6.6/es2020/preact.mjs:2:6149)
    at z (https://esm.sh/stable/preact@10.6.6/es2020/preact.mjs:2:2118)
    at ne (https://esm.sh/stable/preact@10.6.6/es2020/preact.mjs:2:7190)
    at M (https://esm.sh/stable/preact@10.6.6/es2020/preact.mjs:2:6149)
    at z (https://esm.sh/stable/preact@10.6.6/es2020/preact.mjs:2:2118)
    at ne (https://esm.sh/stable/preact@10.6.6/es2020/preact.mjs:2:7190)
    at M (https://esm.sh/stable/preact@10.6.6/es2020/preact.mjs:2:6149)
    at z (https://esm.sh/stable/preact@10.6.6/es2020/preact.mjs:2:2118)
    at ne (https://esm.sh/stable/preact@10.6.6/es2020/preact.mjs:2:7190)
commented

I was able to prevent the error by aliasing dependencies like

import Button from "https://esm.sh/v66/@mui/material@5.11.15/Button?alias=react:preact/compat,react-dom:preact/compat&deps=preact@10.6.6&target=es2020"

however now nothing appears. It seems like the button is entirely ignored

commented

Finally got it working, apparently a third alias was needed: react/jsx-runtime:preact/jsx-runtime

my final version (moving to stable instead of fixed version v66 because internally esm still refers to stable links)

import {render, h} from "https://esm.sh/stable/preact@10.6.6?target=es2020"
import htm from "https://esm.sh/stable/htm@3.1.0?target=es2020"
const html = htm.bind(h)

import Button from "https://esm.sh/stable/@mui/material@5.11.15/Button?alias=react:preact/compat,react-dom:preact/compat,react/jsx-runtime:preact/jsx-runtime&deps=preact@10.6.6&target=es2020"

render(html`<${Button} variant="contained">Hello World</Button>`, document.body)

After understanding more the issues behind my problem, I guess preact would have been a better place to raise this issue. Still learning.