helix

rgm 2022-04-09T00:24:24.521949Z

I'm hoping I can ask for a bit of help understanding hooks-based code https://github.com/rgm/experiments/pull/68/files The problem I'm having is: when I uncomment here I get the dreaded "Warning: Invalid hook call." https://github.com/rgm/experiments/pull/68/files#diff-34c367a936adf6884a6c5338eea0e8b6aa654a7bb049ff4825555cd0afd12939R15 ... I can use the hooks calls in the helix/cljs just fine but the one over in my JSX is blowing up. The test button component is just a counter using setState here https://github.com/rgm/experiments/pull/68/files#diff-fc5d90800d83feb1853cecf16dd05a9427a39046f1166d0ff690622bd2e23104R7 ... the "RUNNING BUTTON" log message doesn't appear at all in the browser console. (It's not impossible—in fact, quite likely—that I've mis-packaged the npm in some way).

👀 1
rayat 2022-04-09T07:17:53.213039Z

Not at my desk so here's some lazy help on the go: 1. I think you're supposed to use the $ macro for the imported components but idk 2. You don't have to js# the props map 3. Honestly it might be the weird way you wrapped the js Button component in cljs 4. Hopefully that wasn't too useless!

lilactown 2022-04-09T15:54:11.441699Z

are you getting this warning at compile time or run time?

rgm 2022-04-09T15:55:39.651119Z

Thanks, I figured it out... my issue was in the npm packaging/linking to a local dir. As best as I can understand it, npm i ../path/to/local/package creates a symlink, and <..insert things I don't understand in the middle ...>, which leads to two copies of React, leading the useState hook call in the JSX component to blow up when invoked from the cljs. I diagnosed it with the advice in http://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react, and eventually figured out it was the non-production-style npm install that linked the JSX component into the cljs project. The trick was to use npx install-local ../mylib from the /myapp (ie. shadow) side.

lilactown 2022-04-09T15:55:57.612129Z

aha

rgm 2022-04-09T15:57:25.934709Z

sigh ... yet again the error message was telling me exactly what was wrong, I just wasn't studied up enough to understand it.

lilactown 2022-04-09T15:57:38.707999Z

rayat’s comments are still correct but sounds like you fixed your core issue

👍 1
❤️ 1
rgm 2022-04-09T15:58:29.672749Z

this seems like a real gotcha with npm i

🤔 2