How to use with native modules?

[zim32]

• [x ] Check if updating to the latest Preact version resolves the issue

Describe the bug
In docs you say No build tools route, but i spend 3 hours trying to make it work with hooks and I give up.

To Reproduce
Please provide documentation how to use preact hooks withoud build step. Which files to import and how to use it

[zim32]

I tried

import { h, cloneElement } from 'https://unpkg.com/preact@latest?module'
import htm from 'https://unpkg.com/htm?module'
import { useState, useRef, useEffect, useCallback } from 'https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module'

and got

hooks.module.js?module:1 Uncaught TypeError: Cannot read properties of null (reading '__H')

[zim32]

Ok it seems this issue is coming from 2020 year and not properly fixed in two years. Seems like this library is abandoned

[rschristian]

We have a pinned issue describing the problem and how one might go about solving it: #2564 (comment)

TLDR? It's a difficult set of issues with Unpkg that aren't really fixable without changing the core of how Unpkg works.

I tried

import { h, cloneElement } from 'https://unpkg.com/preact@latest?module'
import htm from 'https://unpkg.com/htm?module'
import { useState, useRef, useEffect, useCallback } from 'https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module'

and got

hooks.module.js?module:1 Uncaught TypeError: Cannot read properties of null (reading '__H')

Odd, I cannot reproduce that. Here's my attempt to. I copied what you provided exactly, perhaps you had an issue with a cached version of your code? Not sure.

However, the easiest way to combine preact, preact/hooks, and htm is to use htm/preact/standalone. It's a super convenient combination of all 3 in one package! Here's an example of you could use it. Hope it helps.

[zim32]

My example was simplified just to show imorts. Right now I can see that hooks are using global shared state, and I was using separate render() calls, my intuition says that if you use multiple render() calls you end up in a mess

[rschristian]

My example was simplified just to show imorts

Sorry to say, but it was simplified to the point of not allowing us to help you then.

Right now I can see that hooks are using global shared state

No, not quite. Hooks do need to be loaded as a singleton (which is what I'm guessing you're referring to?), but that's not "global shared state" really.

I was using separate render() calls, my intuition says that if you use multiple render() calls you end up in a mess

That depends a bit on what you mean by "separate render() calls". Here's an updated example showing rendering multiple trees.

If you can provide your actual use case I can better help you, else I'm just left guessing.

[zim32]

I will try will standalone version

[zim32]

Ok. Here is code sandbox example. Tell me what I am doing wrong?

https://codesandbox.io/s/friendly-fire-ssbdeg?file=/index.html

If you open browser console you will see

Cannot read properties of null (reading '__H')

If you remove useState from TestApp component it will work.

[zim32]

If useState requires some specific code or context, it will be much much better if it throws some error explaining whats wrong

[rschristian]

Why this does not work?

function TestApp()  {
   const [foo, setFoo] = useState(0);
   return h("p", null, "Hello world");
}

render(TestApp(), document.getElementById("test_components_container"));

That's covered in our docs, see: https://preactjs.com/guide/v10/api-reference#render

The first argument must be a valid Virtual DOM Element, which represents either a component or an element. When passing a Component, it's important to let Preact do the instantiation rather than invoking your component directly, which will break in unexpected ways:

const App = () => <div>foo</div>;

// DON'T: Invoking components directly breaks hooks and update ordering:
render(App(), rootElement); // ERROR
render(App, rootElement); // ERROR

// DO: Passing components using h() or JSX allows Preact to render correctly:
render(h(App), rootElement); // success
render(<App />, rootElement); // success

[zim32]

Why this does not work?

function TestApp()  {
   const [foo, setFoo] = useState(0);
   return h("p", null, "Hello world");
}

render(TestApp(), document.getElementById("test_components_container"));

That's covered in our docs, see: https://preactjs.com/guide/v10/api-reference#render

The first argument must be a valid Virtual DOM Element, which represents either a component or an element. When passing a Component, it's important to let Preact do the instantiation rather than invoking your component directly, which will break in unexpected ways:

const App = () => <div>foo</div>;

// DON'T: Invoking components directly breaks hooks and update ordering:
render(App(), rootElement); // ERROR
render(App, rootElement); // ERROR

// DO: Passing components using h() or JSX allows Preact to render correctly:
render(h(App), rootElement); // success
render(<App />, rootElement); // success

Thanks. That fixes my issue. I thought I return valid vnode and it should just work. But seems like hooks magic requires some specific context.

[zim32]

WHen I see that error, I start googling and found tak about bad CDN, modules, redirects and so on, no one points to problem with render component. So problem was that this error bubbles in several scenarious, which leads to context needed for hooks not properly initialized

[rschristian]

no one points to problem with render component

I think we could've gotten you an answer much quicker if you just posted the code you were using exactly. That's why it is so important to give good reproductions when opening bugs as we're not seeing what you're seeing. We need that extra context or we're left guessing.