This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-08-20
Channels
- # announcements (1)
- # bangalore-clj (27)
- # beginners (82)
- # boot (4)
- # chestnut (1)
- # cider (22)
- # cljs-dev (26)
- # cljsrn (4)
- # clojure (118)
- # clojure-dev (18)
- # clojure-italy (2)
- # clojure-losangeles (1)
- # clojure-nl (2)
- # clojure-russia (1)
- # clojure-spec (15)
- # clojure-uk (125)
- # clojurescript (61)
- # core-async (74)
- # cursive (2)
- # datomic (41)
- # duct (6)
- # editors (7)
- # emacs (3)
- # events (1)
- # figwheel-main (3)
- # fulcro (111)
- # hoplon (11)
- # jobs-discuss (97)
- # lein-figwheel (99)
- # off-topic (34)
- # onyx (4)
- # parinfer (9)
- # pedestal (4)
- # precept (2)
- # re-frame (5)
- # reagent (2)
- # reitit (4)
- # ring-swagger (11)
- # shadow-cljs (104)
- # spacemacs (4)
- # tools-deps (19)
- # vim (8)
- # yada (15)
@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)