clojurescriptreact-selectshadow-cljsclojurescript-javascript-interop

Shadow-cljs requiring react-select Creatable component


Currently I'm requiring using ["react-select" :default Select] in order to create a component:

(def dropdown-standard (ra/adapt-react-class Select)) (this works perfectly)

I want to access the Creatable component (https://react-select.com/creatable) which the documentation requires it as: import Creatable, { useCreatable } from 'react-select/creatable';

I've tried the obvious thing which is to try duplicate it in cljs ["react-select/creatable" :default Creatable] but this won't work as shadow-cljs will try to find the npm library react-select/creatable which doesn't exist.

I've also tried to require react-select directly through ["react-select" :as react-select] and then calling react-select/SelectBase and react-select/Creatable. The component does not behave as expected and there are a few errors so I'm guessing this is not the correct way to do it.

Previously I was requiring [cljsjs/react-select "2.4.4-0"] and which just allowed me to call js/Select and js/Select.Creatable directly. But I can no longer use cljsjs due to shadow-cljs.

I have read the section in the Shadow-cljs user guide (https://shadow-cljs.github.io/docs/UsersGuide.html#cljsjs) about migrating cljsjs but it seems to just be exporting some functions into react namespace etc. Tried it out but no luck with my issue.


Solution

  • ["react-select/creatable" :default Creatable]
    

    was the correct translation, and you can add :refer (useCreatable) to get the other part. Alternatively you can use the official CLJS syntax for default properties via $default, but that'll require using two separate require forms.

    ["react-select/creatable$default" :as Creatable]
    ["react-select/creatable" :refer (useCreatable)]
    

    The documentation has examples for this.

    I'm unsure why you say this didn't work, as you were on the right track. Your other solution is maybe an alternate way this works, but it is not the literal translation of the JS docs. So, it might stop working at some point. Best to follow the official docs.

    Could be that you are using an ancient version of the react-select npm package, which doesn't have the /creatable part.

    The CLJSJS migration docs do not apply if you are using the npm package directly, which you should always do. CLJSJS only applies if you are using another library which depends on the CLJSJS package and you yourself can't change. However, nowadays this is pretty much a non-problem and has been for many years.