-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using useState leads to error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__H') #4335
Comments
The way 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
{
"imports": {
"preact": "https://esm.sh/preact@10.20.1",
"preact/": "https://esm.sh/preact@10.20.1",
"preact-render-to-string": "https://esm.sh/preact-render-to-string@6.4.1?external=preact"
}
} Note the 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/preact@10.20.1",
"preact/": "https://esm.sh/preact@10.20.1/",
"preact-render-to-string": "https://esm.sh/preact-render-to-string@6.4.1?external=preact"
},
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact"
+ }
} With that setup, you can simplify your snippet a bit: - /** @jsxImportSource https://esm.sh/preact@10.20.1 */
- import { h } from "https://esm.sh/preact@10.20.1";
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 />)); |
Thank you for the quick and elaborate response, @marvinhagemeister, very helpful and very much appreciated! 🙏 To make things work I had to |
Happy to help. Whoops, yeah that import should've been |
Already using the latest released version of Preact, i.e. 10.20.1, as of filing this issue.
Describe the bug
Preact shows error
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__H')
whenuseState
is used.To Reproduce
Steps to reproduce the behavior:
test.tsx
containing the following content:deno run test.tsx
results in:Expected behavior
I'd expect to see
<p>42</p>
.What am I doing or is going wrong?
The text was updated successfully, but these errors were encountered: