shadow-cljs and react-window problem

[Scott Klarenbach]

I'm super happy and impressed with shadow-cljs, it has radically improved my workflow and deployments, and exposed the npm universe without ballooning my js files...so, thanks very much to Thomas Heller,

I'm having an issue with react-window interop.

I'm successfully importing and using several 3rd party npm modules.  It's just this one that is not working.

I keep getting the error:  Invariant Violation: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `List`."

I'm using re-frame and shadow-cljs, and the following code to initialize:

...

(:require

    [reagent.core :as reagent]

    ["react-window" :refer [FixedSizeList]]

...

(defn render [props]

  (reagent/as-element [:div "hey"]))

(defn fixed-size-list []

  (react/create-element

    FixedSizeList

    {:height 400 :width 300 :itemSize 46 :itemCount 200}

    render))

but always get the error above.  FixedSizeList is refered and available similar to other components.  As the error says, the problem is in the render of list.

I've tried render returning plain hiccup, reagent elements, react elements, and react classnames as strings, and for some reason the render fn in clojurescript is not valid as in the javascript examples.

This same general approach is working elsewhere for 3rd part components, but this is the first time I'm passing a function in as the body of the component, rather than as a value on the property map.

Any insights are greatly appreciated.

Scott.

[Thomas Heller]

Hey,

if you are falling back to manually calling react/createElement then you must ensure that you are passing it data it understands. In your example you are passing a CLJS map which React just identifies as a object but not as a props object so it thinks you meant a component and warns you.

(defn fixed-size-list []

  (react/createElement

    FixedSizeList

    #js {:height 400 :width 300 :itemSize 46 :itemCount 200}

    render))

That should do it, or just use the reagent built-ins for native interop via [:> FixedSizeList {:height ...} render]

Cheers,

/thomas

[Scott Klarenbach]

Thanks Thomas.

Actually I was doing a clj->js conversion.  For clarity I omitted some macro code I had been using to initialize material ui components.  But your example worked which showed me the bug must be in my macro.

For convenience, my mui macro accepted [& args] allowing me to add multiple subcomponents in a definition without having to wrap them in a [:div ...] or call reagent/as-element.  This results in a '(component) even if there is only one component.  This worked fine for material ui but when you pass '(render-fn) to react-window instead of just render-fn, you get the error I mentioned.  sheesh.

sk