Fork me on GitHub
#reagent
<
2018-08-20
>
luposlip08:08:05

@lee.justin.m @lilactown @urbanslug the reason I started trying with the NPM/:foreign-libs way of loading the react component is because I need the following load order: 1: Load React.js 2: Load react components (i.e. react-rangeslider), and then 3: Load my own app.js built with cljsbuild/shadow whatever. If I just load the minified version, I'll get a race condition, because React.js is being put into the cljsbuild of app.js. So if I load react-rangeslider before my app.js, the react-rangeslider will fail because React.js hasn't been loaded yet. If I load app.js before react-rangeslider, my own code will fail because react-rangeslider hasn't been loaded. So, my idea was to exclude cljsjs/react from the lein configuration, and load React.js manually, instead of having it loaded as part of the app.js. But I couldn't get that to work either. So by adding the :foreign-libs my hope was that the loading order issue would be fixed. That worked, but as mentioned Friday I couldn't get it to work in that way. Now I've changed it back again, away from es6/npm and back to UMD packaged min.js. My index.html currently adds these, to get the loading order right (I've excluded cljsjs/react and cljsjs/react-dom from project.clj):

<script src="/js/react.production.min.js"></script>
    <script src="/js/react-dom.production.min.js"></script>
    <script src="/js/rangeslider.min.js"></script>
    <link rel="stylesheet" href="/css/react-rangeslider.min.css" />
    <script src="/js/compiled/app.js"></script>
Then in my views.cljs I simply have this:
[:> js/ReactRangeslider {:min 10 :max 20 :value 15}]
Which throws this error:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at invariant (react-dom.inc.js:59)

luposlip09:08:29

BUT: I made it work, via this:

(def slider-class
  (.-default js/ReactRangeslider))

...
[:> slider-class {:min 10 :max 20 :value 16}]
! 🙂 Thanks for your input guys. I think I'll write this up as a blog post, or add it to the wiki.

👏 3