Cannot import hooks directly from unpkg

[dangh]

Hello,

hooks.module.js import from preact module, causing resolution failure when loading hooks as ES6 module. Should we import from preact.module.js in the same package instead?

This is how I load preact and preact/hooks:

import { h, render } from 'https://unpkg.com/preact@10.0.0-rc.3/dist/preact.module.js';
import { useState, useEffect } from 'https://unpkg.com/preact@10.0.0-rc.3/hooks/dist/hooks.module.js';

[developit]

Hi there! You can use the following imports to load hooks from unpkg successfully:

import { h, render } from 'https://unpkg.com/preact@latest?module';
import { useState, useEffect } from 'https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module';

It's important to note that subpackage versioning does not work on unpkg. This is something I'd like to fix but haven't had the time to do.

Working example:
https://codepen.io/developit/pen/XWrvXvo?editors=0010

[enjikaka]

Hmm. I'm getting Cannot read property '__H' of undefined in console when trying this. Any ideas?

http://plnkr.co/edit/BeZCBu5j2mrKoeYvU4Ri?p=preview

[JoviDeCroock]

Hey @enjikaka here's a working application with unpkg imports if you want you can try/reproduce it there https://github.com/JoviDeCroock/Vanilla-Preact-Application

[Kanaye]

@enjikaka
In your main.js you imported from https://unpkg.com/preact?module
in your counter.js you imported https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module.
That means you are importing preact 2 times as unpkg forces an import of preact@latest in hooks.module.js.
And the preact instance bound to htm never gets the options required to use hooks set.

I've changed the import in main to also use preact@latest and added a missing import of useCallback and changed counter to value in counter.js and your example just works fine: https://plnkr.co/edit/P9e8C74p9zPMrEiWAIat?p=preview

[enjikaka]

@Kanaye Ah, yes. Thanks! I assumed https://unpkg.com/preact?module would resolve to "latest" tag. I also tried removing @latest from the hooks import but that didn't work. It does indeed work when I add @latest to all preact imports.

[jgoux]

@developit In your example, how could we add htm into the mix? I tried multiple unpkg combination but couldn't make it works. (hooks + preact + htm)

[Kanaye]

Hi @jgoux.
Importing just the 3 modules from unpkg seems to work fine for me: example.

[dfabulich]

It's important to note that subpackage versioning does not work on unpkg. This is something I'd like to fix but haven't had the time to do.

@developit Can you clarify: Is this a bug in unpkg, or a bug in preact?

[developit]

It's an issue with unpkg.

If you're looking for a CDN in the meantime, I set one up that supports import maps and module concatenation:

https://npm.reversehttp.com/#preact,preact/hooks

[dfabulich]

I found the bug in unpkg's github mjackson/unpkg#197

[rodrigopa]

import { h } from 'https://unpkg.com/preact@latest/dist/preact.module.js?module';
import { useState } from 'https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module';
import htm from 'https://unpkg.com/htm@latest/dist/htm.module.js?module';

Importing only this way, my webstorm could download the module and index the types.

[appsforartists]

I just tried to make a new Codepen from scratch. Codepen loads from skypack by default, and simply importing preact and @preact/signals from Codepen's Settings pane will result in an obscure error

Uncaught TypeError: Cannot read properties of undefined (reading '__H')
    at d (hooks.js:5:14)
    at F (hooks.js:63:12)
    at useSignal (signals.js:178:10)
    at k.Counter [as constructor] (pen.js?key=pen.js-6b747109-f903-b791-dfb8-c421f7bf58e7:7:19)
    at k.q [as render] (preact.js:270:15)
    at L (preact.js:193:51)
    at x (preact.js:75:7)
    at L (preact.js:195:265)
    at B (preact.js:274:103)
    at pen.js?key=pen.js-6b747109-f903-b791-dfb8-c421f7bf58e7:4:1

As I deduced from some searching on Preact's issue tracker, the issue is that the two modules are trying to import the same file, but are getting independent copies.

Here's a working version. I thought I had changed the version hashes to match, but it looks like it's working now with different hashes. 🤷‍♂️

cc @FredKSchott @chriscoyier

[chriscoyier]

Here's another working version using esm.sh:

https://codepen.io/chriscoyier/pen/MWZbEJR

import { createElement, render } from "https://esm.sh/preact";
import { useSignal, useComputed } from "https://esm.sh/@preact/signals";

I think Skypack is in deprecated/locked-down mode, which probably happened before preact had signals and all that? I dunno. Fred gave us a heads up on that a while back and suggested esm.sh. We have a plan to move to that but it's all part of a larger move and just isn't done yet.