Fork me on GitHub
Slack Archive

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

2020-04-27

Channels

#figwheel-main
<
2020-04-27
>
Jp Soares01:04:32

I'm having a breaking change when upgrading figwheel-main "0.2.0" to figwheel-main "0.2.1", as it can be seen in this repo https://github.com/JpOnline/t1-error I get the error 

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

The above error occurred in the <WithStyles(ForwardRef(Button))> component:
    in WithStyles(ForwardRef(Button))
when using the npm package material-ui with reagent. At first I thought it was an exclusivelly problem of upgrading reagent or react, as I was upgrading everything at once, (I was discussing the problem in the slack reagent channel https://clojurians.slack.com/archives/C0620C0C8/p1587673619232800) but further investigation showed that I only get the error when upgrading figwheel-main. I clearly keep using version 0.2.0, but would be nice to understand why it happens. Could someone explain why I start to see this react error only when I upgrade figwheel-main from 0.2.0 to 0.2.1? Is it using a different strategy to select npm packages?

schaueho16:04:35

JFTR, I just tried to go from using the cljsjs packages for React to npm deps and I get the same error on figwheel-main 0.2.0 and 0.2.3, regardless.

Jp Soares17:04:40

Is the configuration similar to this repo? https://github.com/JpOnline/t1-error

schaueho08:04:09

No. I added react/react-dom to the :npm-deps and also set :install-deps to true.

schaueho08:04:20

This issue looks very weird to me. I mean, I made no change to the Material-UI packages, I still simply depend on [cljsjs/material-ui "4.9.5-0"] So, even if the build now uses different react packages, I don't understand how this could potentially affect the usage of hooks in Material UI.

Jp Soares14:04:10

I can't understand either, but for now is not a problem for me to keep this repo configuration. Maybe the new reagent functional-component can fix the issue at some point.

schaueho14:04:37

After looking a little into my resulting cljs_deps.js file, I think there might be two copies of React (see point 3 of the error message) in my case. In my old approach (no npm deps, only cljsjs packages), I see only references to cljsjs/react. When I replace the cljsjs dependencies to React with npm deps, I see both references to react in node_modules and to cljsjs/react.

schaueho14:04:19

Maybe you could check if you also see two references to react in your cljs_deps.js file. This would at least give an additional hint if this is what's going wrong or not.

theeternalpulse19:04:55

aside from the issue above, will the new :bundle target be compatible with figwheel. I'm wondering how to incorporate figwheel and the new bundling features..

theeternalpulse20:04:17

right, I meant after this issue is resolved

theeternalpulse20:04:25

I guess it is answered, but wasn't sure the direction it would be taken as far as npm dependencies and such, but I guess I'll keep an eye out