Hooks Problem

[rafael-gal]

First of all thank you for this wonderful plugin.

But unfortunately, the current plugin is not working well on Preact @v10.7+ I really wanted to upgrade my versions as 10.6.3 is a bit outdated and I'm missing few features that I need for the project I'm working on I am using multiple plugin for preact. Some of the versions requires higher Preact version which causes a lot of errors for me when trying to switch versions the only working version I tried is 10.6.3 that does not create conflicts with all these plugins.

Working Versions:
Preact: 10.6.3
Preact Hooks: 10.6.3
Preact Compat: 10.6.3
@preact Signal: 1.1.5
Preact-router: v3.2.1
Preact-async-route: 2.2.1

Versioned tried to and failed:
Preact: 10.7.3^
Preact Hooks: 10.7.3^
Preact Compat: 10.7.3^
@preact Signal: 1.1.5^
Preact-router: v3.2.1^
Preact-async-route: 2.2.1^

It would be really nice it this work on atleast Preact v10.16.

[rschristian]

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.

[rafael-gal]

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 preact@v10.12 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.

[rschristian]

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/preact@10.12.1",
        "preact/": "https://esm.sh/preact@10.12.1/",
        "@preact/signals": "https://esm.sh/@preact/signals@1.1.3?external=preact",
        "htm": "https://esm.sh/htm@3.1.1"
      }
    }
</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.

[rafael-gal]

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

[rschristian]

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.

[rafael-gal]

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!

[rschristian]

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

Sorry that this is a bit of a pain.