Hooks Problem about htm HOT 7 CLOSED

Can you please clarify what you mean by "causes a lot of errors"?

If you're using from a CDN, you may need to mark Preact as external in your import map so that these packages don't bring in their own versions of Preact.

Preact-async-route

Shouldn't be used, it was deprecated in Preact X/10 which came out years ago. Use lazy from preact/compat instead.

from htm.

Can you please clarify what you mean by "causes a lot of errors"?

What I mean to say is one of the plugin for example required version greater than another. Giving the example of Preact Signals V0.0.4 when importing it through CDN it uses [email protected] which then cannot be lowered so the resolution I'll make is to update my preact version. but when I do it gives me an error with the hooks module.

It's throwing an error on the first function component that uses a Hooks specifically on this line.

now I'm thinking that these happen because the htm module could possibly not support higher versions? because these things happen only when I upgrade to greater than Preact 10.6 or 10.7.

If you're using from a CDN, you may need to mark Preact as external in your import map so that these packages don't bring in their own versions of Preact.

how do I exaclty do that?

Preact-async-route

Shouldn't be used, it was deprecated in Preact X/10 which came out years ago. Use lazy from preact/compat instead.

I will do that thank you for informing me.

from htm.

now I'm thinking that these happen because the htm module could possibly not support higher versions?

No, you're just importing multiple version of Preact which conflict with each other. Preact (and React) require to be loaded as singletons, else you'll see that reading '__H' error.

how do I exaclty do that?

<script type="importmap">
    {
      "imports": {
        "preact": "https://esm.sh/[email protected]",
        "preact/": "https://esm.sh/[email protected]/",
        "@preact/signals": "https://esm.sh/@preact/[email protected]?external=preact",
        "htm": "https://esm.sh/[email protected]"
      }
    }
</script>

You can change up the versions to whatever you need (within reason -- @preact/signals does still require a minimum preact version of course).

The general idea here is that most CDNs will load dependencies, so if you ask for https://esm.sh/@preact/signals, it'll see that it relies upon preact, and will send a copy of preact with it. What we instead need to do is say that preact is external -- we already have our own copy. It'll instead use the importmap we've written above to access preact in our browser.

Note: the "preact/" entry is for subpath exports, preact/compat, preact/hooks, etc. A bit annoying that import maps require a separate entry for them, but what can you do.

from htm.

I see. currently, no errors we're being displayed even though I have different versions(Lower versions) but I'll sure try out to sort my Preact versions first and see if I'm still getting the same error.

I'm using skypack I'm checking on their documentation but it does not seem to have an external query here but I'll try different one.

A bit annoying that import maps require a separate entry for them, but what can you do.

+1 we just have to live we it xd

from htm.

I'm using skypack I'm checking on their documentation but it does not seem to have an external query

Yeah, unfortunately Skypack became unmaintained and I don't think it's seen any changes in a few years. esm.sh is the best spiritual successor and has a lot of useful features on top.

from htm.

After fixing the imports using esm.sh it seems that the app is stable. I'm not on a later version. Thank you so much!

from htm.

Glad it's working! Feel free to ping me if you run into any issues.

Sorry that this is a bit of a pain.

from htm.