Fork me on GitHub
#clojurescript
<
2021-01-17
>
andrewboltachev17:01:51

Hello! I'm creating a regaent component which uses hooks (using Popper.js library): https://dpaste.com/6VL9ZMBCQ using Figwheel-main and want to use advanced optimization. React is provided via foreign-libs. When having optimization level higher than whitespace, I'm getting "Invalid hook call" error. How can I tell the exact reason of it? Or how can I prevent (in CLJS) certain functions from being optimized maybe?

p-himik17:01:14

Try adding ^js in front of every new binding, be it in let or fn, that stores a JS object whose fields you're getting via interop.

p-himik17:01:38

I.e. instead of (defn dropdown-raw [props] ...) it will be (defn dropdown-raw [^js props] ...) and so on.

p-himik17:01:23

You don't need to do that for stuff like className because you never try to access its fields, you just pass it around.

andrewboltachev17:01:32

@U2FRKM4TW thanks! tried for props, but didn't help

p-himik18:01:40

No clue then. Does that error have any details, any stack trace?

p-himik18:01:06

> Hooks can only be called inside of the body of a function component. Well, this is quite telling. Maybe Reagent has issues with optimizations and its workaround for creating functional components with :>. Are you using Reagent 1.0+ by any chance?

p-himik18:01:27

BTW no need to @ someone that participates in a thread - we still get notifications. :)

andrewboltachev18:01:24

ah good point on @

andrewboltachev18:01:29

reagent is 0.10.0

andrewboltachev18:01:07

so yes... maybe I can wrap a functional component with classical one (in classical React, haha) and then this will work

andrewboltachev18:01:35

I tried js/React.createElement instead of :> but this didn't help

andrewboltachev18:01:15

i.e. also works during development but getting the same error

p-himik19:01:35

No idea, sorry. You can direct this particular question to #reagent since its maintainers have higher chances of seeing your question there. Or, since it looks like a proper usage according to the documentation, you can just create an issue on Reagent's GitHub.

andrewboltachev19:01:40

Yes, no luck even when I rewrite everything in JS

andrewboltachev19:01:55

I'll try later to figure out when I have time, comparing output of whitespace and simple versions in minimal case

👍 3
ingesol10:01:48

Don't know if it's relevant, but you can set :pretty-print and `:pseudo-names` to true in compiler options, that will give you a much more readable and debuggable advanced build.