Preact: 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/[email protected]/dist/preact.module.js';
import { useState, useEffect } from 'https://unpkg.com/[email protected]/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 https://github.com/mjackson/unpkg/issues/197