Fork me on GitHub
#reagent
<
2023-09-13
>
itaied08:09:19

Hey all, I'm trying to run a react component that use hooks and I get a setup error in the consumer:

[:> ReactComponent {}]
Error:
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)
2nd Error:
The above error occurred in the <Context.Consumer> component:
...
Should I configure something else for using a react component (as a black box) that makes use of hooks?

p-himik08:09:53

You shouldn't have to. Are you sure there aren't any obligatory arguments that you must pass to that component?

itaied08:09:57

almost sure, I'll double check, but I think if there's a required argument I'll get a different error

p-himik08:09:28

Not necessarily. If there's no check for it, you get undefined behavior.

p-himik08:09:06

What version of emotion-js are you using?

itaied08:09:46

"@emotion/core": "10.1.1",

itaied08:09:29

I suspect missing theme provider in my components tree

p-himik08:09:53

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?

itaied08:09:35

Yes I'm using webpack

itaied08:09:33

but i think i have found the root cause, it's a missing provider.

...theme.button.setup,
and the error is pointing there (the setup part)

👍 1
schadocalex16:09:58

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)

Nasiru Ibrahim16:09:11

By this image, I think you're updating the stare from onkeydown or onkeypressed event instead of onkeyup

schadocalex19:09:20

The code is under the example (it’s on-change)

Nasiru Ibrahim19:09:55

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

schadocalex19:09:18

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

Nasiru Ibrahim19:09:43

I've tested it, it works perfectly. Don't know what's the issue at your end.

Nasiru Ibrahim19:09:30

It used the onchange event which should work well as expected

schadocalex19:09:16

On chrome? Which version? I asked a friend and I tried in Linux and Mac and the three times it was buggy.

Nasiru Ibrahim19:09:32

Even in chrome (mobile), it works fine over here

Nasiru Ibrahim20:09:10

I still don't get the issue here

schadocalex20:09:54

I can’t see the last letter. On PC I can’t even see the cursor nor a part of the last letter

schadocalex20:09:47

(And no it’s not due to CSS)

Nasiru Ibrahim20:09:22

Your browser UI theme?

schadocalex20:09:55

It’s not CSS it works well in pure html or even React

schadocalex16:09:01

Expected behaviour:

Ben Lieberman19:09:40

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?