Clojurians Log v2
reagent
Hey all, I'm trying to run a react component that use hooks and I get a setup error in the consumer:
[:> ReactComponent {}]Uncaught TypeError: Cannot read properties of undefined (reading 'setup')
at eval (ui.esm.js:873:36)
at handleInterpolation (serialize.browser.esm.js:146:24)
at serializeStyles (serialize.browser.esm.js:266:15)
at eval (styled-base.browser.esm.js:121:93)
at updateContextConsumer (react-dom.development.js:18304:19)
at beginWork (react-dom.development.js:18661:14)
at HTMLUnknownElement.callCallback (react-dom.development.js:188:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237:16)
at invokeGuardedCallback (react-dom.development.js:292:31)
at beginWork$1 (react-dom.development.js:23203:7)The above error occurred in the <Context.Consumer> component:
...
You shouldn't have to. Are you sure there aren't any obligatory arguments that you must pass to that component?
almost sure, I'll double check, but I think if there's a required argument I'll get a different error
Not necessarily. If there's no check for it, you get undefined behavior.
What version of emotion-js are you using?
"@emotion/core": "10.1.1",
I suspect missing theme provider in my components tree
Are you using stuff like babel or webpack?
If not, what is the version of @emotion/serialize that you have installed, in package-lock.json?
Yes I'm using webpack
but i think i have found the root cause, it's a missing provider.
...theme.button.setup,setup part)
Hi there! On Chrome (107 and 117, Linux and Mac at least), I can't see the cursor when I'm typing into a input (text/number). You can test on https://reagent-project.github.io/ in the share state example. If you type different characters until the input is full, you won't see the last one nor the cursor. But you can go left/right with the keyboard and then you see it. Do you know why? Looks like it works with official React examples, so maybe Reagent triggers a Chrome bug. (It works on FF, does not on Safari)
By this image, I think you're updating the stare from onkeydown or onkeypressed event instead of onkeyup
The code is under the example (it’s on-change)
When your state swap! is called in the keydown event, the state gets updated before the character is dropped in the input field. Unlike the keyup event where the character has been dropped. So when you press the arrow keys, it updates the state with the last character. I believe this is what you're talking to you
Maybe you’re right, but it’s the official example of how to do in reagent. I’ve created an issue tho https://github.com/reagent-project/reagent/issues/595
I've tested it, it works perfectly. Don't know what's the issue at your end.
It used the onchange event which should work well as expected
On chrome? Which version? I asked a friend and I tried in Linux and Mac and the three times it was buggy.
Even in chrome (mobile), it works fine over here
I still don't get the issue here
I can’t see the last letter. On PC I can’t even see the cursor nor a part of the last letter
(And no it’s not due to CSS)
Your browser UI theme?
It’s not CSS it works well in pure html or even React
It's ok
Expected behaviour:
I seem to recall there's some gotchas when rendering React Native components and that it is documented somewhere? But I can't find it. Can someone refresh my memory if that's real?