Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2022-04-09

Channels

#helix
<
2022-04-09
>
rgm00:04:24

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
rayat07:04:53

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!

lilactown15:04:11

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

rgm15:04:39

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.

rgm15:04:25

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

lilactown15:04:38

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

👍 1
❤️ 1
rgm15:04:29

this seems like a real gotcha with npm i

2
rgm15:04:39
replied to a thread: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).

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.