Using useState leads to error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__H') about preact

[afh]

Thank you for the quick and elaborate response, @marvinhagemeister, very helpful and very much appreciated! 🙏

To make things work I had to import { useState } from "preact/hooks";

[marvinhagemeister]

The way esm.sh works is that it creates a full bundle for every package that also includes all of its dependencies. This means that you're ending up with two different copies of Preact. In this case one is 10.20.1 and the other is 10.20.0. You can check this for yourself by adding "vendor": true to your deno.json and inspecting the contents of the generated vendor/ directory.

Normally, duplicate dependencies wouldn't be a problem, but because hooks rely by design on a singleton pattern to keep track of the currently rendering component (not a choice by us), this breaks when one component is rendered by one version of Preact and another by another version of Preact.

This is a bit of a limitation of URL imports and tools like esm.sh which are not aware of the other imports in your code. You'll pretty much always will end up with duplicate dependencies without knowing about it, without passing some additional options to tools like esm.sh. The solution to this is to ensure that that only ever one copy of Preact is present in your app. This can be done through an import map, either in the browser or inside deno.json:

// deno.json
{
  "imports": {
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]",
    "preact-render-to-string": "https://esm.sh/[email protected]?external=preact"
  }
}

Note the ?external=preact bit to the last URL as this tells esm.sh not to inline its own copy of Preact into that file.

Since you're already using Deno, you could set up JSX as well to get the full benefits of a typesafe templating language:

  {
    "imports": {
      "preact": "https://esm.sh/[email protected]",
      "preact/": "https://esm.sh/[email protected]/",
      "preact-render-to-string": "https://esm.sh/[email protected]?external=preact"
    },
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
  }

With that setup, you can simplify your snippet a bit:

- /** @jsxImportSource https://esm.sh/[email protected] */
- import { h } from "https://esm.sh/[email protected]";
  import { useState } from "preact/hooks";
- import renderPreactToString from "preact-render-to-string";
+ import { renderToString } from "preact-render-to-string";
  
  const App = () => {
    const [count, setCount] = useState(23)
    setCount(42);
-   return h('p', {}, count)
+   return <p>{count}</p>
  }

- console.log(renderPreactToString(h(App, {})));
+ console.log(renderToString(<App />));

[marvinhagemeister]

Happy to help. Whoops, yeah that import should've been preact/hooks. Thanks for noticing, I've updated the snippet.