figwheel-main

figwheel-main http://figwheel.org
Jp Soares 2020-04-27T01:04:32.108600Z

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?

2020-04-28T16:09:35.112400Z

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 Soares 2020-04-28T17:05:40.112600Z

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

2020-04-29T08:27:09.112900Z

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

2020-04-29T08:30:20.113100Z

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 Soares 2020-04-29T14:05:10.113300Z

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.

2020-04-29T14:06:37.113500Z

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.

2020-04-29T14:07:19.113700Z

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.

theeternalpulse 2020-04-27T19:08:55.110300Z

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..

dominicm 2020-04-27T19:14:56.110600Z

See the pinned message https://clojurians.slack.com/archives/CALJ3BFLP/p1587827227053000

theeternalpulse 2020-04-27T20:18:17.111Z

right, I meant after this issue is resolved

theeternalpulse 2020-04-27T20:20:25.112100Z

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