This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-12-13
Channels
- # adventofcode (77)
- # beginners (132)
- # boot (11)
- # cider (40)
- # clara (10)
- # cljsjs (1)
- # cljsrn (4)
- # clojure (148)
- # clojure-android (1)
- # clojure-greece (5)
- # clojure-italy (5)
- # clojure-nl (7)
- # clojure-spec (57)
- # clojure-uk (9)
- # clojurescript (115)
- # core-matrix (1)
- # cursive (3)
- # data-science (1)
- # datomic (1)
- # duct (7)
- # emacs (20)
- # fulcro (29)
- # funcool (4)
- # graphql (31)
- # instaparse (15)
- # java (1)
- # jobs (6)
- # jobs-discuss (95)
- # leiningen (2)
- # off-topic (30)
- # om (4)
- # onyx (7)
- # pedestal (6)
- # quil (4)
- # re-frame (52)
- # reagent (59)
- # rum (1)
- # spacemacs (3)
- # specter (61)
- # test-check (3)
Right... makes sense. It seems, though, I the modules are not loaded properly. I'm basing my config on https://anmonteiro.com/2017/03/requiring-node-js-modules-from-clojurescript-namespaces/ and http://blob.tomerweller.com/reagent-import-react-components-from-npm :
project.clj
:
[re-frame "0.10.2"]
[reagent "0.7.0"]
[reagent-utils "0.2.1"]
...
:install-deps true
:npm-deps {:react-flatpickr "3.6.3"
:react "15.3.1"
:react-dom "15.3.1"}
I get this, it doesn't matter if I exclude react
and react-dom
from the :dependencies
(as mentioned in one of the articles):
WARNING: JSC_JS_MODULE_LOAD_WARNING. Failed to load module "react" at <project-home>/ui-app/node_modules/react-flatpickr/build/index.js line 11 : 4
WARNING: JSC_JS_MODULE_LOAD_WARNING. Failed to load module "flatpickr" at <project-home>/ui-app/node_modules/react-flatpickr/build/index.js line 19 : 4
WARNING: JSC_JS_MODULE_LOAD_WARNING. Failed to load module "react" at <project-home>/ui-app/node_modules/react-flatpickr/build/index.js line 11 : 13
WARNING: JSC_JS_MODULE_LOAD_WARNING. Failed to load module "flatpickr" at <project-home>/ui-app/node_modules/react-flatpickr/build/index.js line 19 : 17
Failed to compile "target/cljsbuild/public/js/app_devcards.js" in 26.486 seconds.
for some reason, the modules are not found, although they are there (they are listed in ls <project-home>/ui-app/node_modules
)
@kurt-o-sys Is it possible :npm-deps is not in the correct place in project.clj?
also, make sure you have @cljs-oss/module-deps installed in node_modules
It's a dependency for the CLJS compiler
I've been to hell and back with npm-deps....
Well, the modules are downloaded when I run lein ...
, so I guess they are in the right place.
cljs-oss/module-deps... let me check
also some react versions are not compatible with the google closure compiler
react 15.3.1?
let me check
that's a relatively old one, it's probably okay.
yeah, reagent 0.7.0 is using that one ( I think) 😛
I don't recommend using the NPM-deps feature yet, really
oh, ok... so, how do I import existing react modules the better way?
too much magic going on
react-flatpickr right?
right, but it can be any react component.
1. It's not on CLJSJS 2. It doesn't have UMD build when installed via NPM
It depends on the module
you'll have to use browserify to compile a dependency bundle for this
so, basically, it's impossible to add any random existing npm react component to a reagent project?
This blog post can help: http://blob.tomerweller.com/reagent-import-react-components-from-npm
you can anything, but the difficulty of integration depends on the module
some modules like react-bootstrap are already on CLJSJS
you can install*
yeah, well, that's what I tried earlier, and didn't succeed - but I can try again
I should write a blog post about it really
it's tricky sadly
weird... so well, let's see if I can make it work. Just out of curiosity: why is it so hard? (I mean, reagent is just a wrapper around react, so I'd expect the components to be easily available, but that doesn't seem to be the case )
many react components can only be required via "require" or "import", they don't expose their object in the js/window object
aka they don't have a UMD build
so to import them you'll need to use webpack/browserify
now, the closure compiler CAN do this.. but.. those modules also require react
and react-dom
in the same manner
ok... so that's why I added them to the npm-deps, right?
and you're already using react via cljsjs, you can't use 2 different copies of react in the same page
yeah ideally npm-deps should solve it
so I exclude it from reagent and include it in the npm-deps.
I got it so far... so the problem is the umd build?
if there was a UMD you could just stick it in a script tag and call it a day
so, if I add webpack to the dependencies, it may work?
I mean, what npm-deps does, looks the same as what is described in http://blob.tomerweller.com/reagent-import-react-components-from-npm ?
oh, and I should add a webpack setup...
it's not a pleasant journey to make it work
i would say - try to write the wrapper for flatpickr yourself
right, I agree.
Yeah, is another option. But that doesn't solve me the problem of getting other existing components to work (which will happen some day). But I may try again - tried it before, didn't work out that well, but well, it's worth the effort, seeing how hard it is to add existing ones 🙂
You can get any component to work, but it requires understanding javascript modules and build tools
again, the integration difficulty varies by the module
react-flatpickr
is of the kind that is the hardest to integrate
🙂 - so well, I'll give it another try
I wanted to avoid js and all the build tools etc (that's why cljs appeals to me pretty much) - doesn't seem to work 😛
well, there's still Leiningen and the google closure compiler. But I get what you mean
thx for the info!
@kurt-o-sys my experience has been that bringing in JS deps is not usually too painful. There are some that are complicated though as you may have found
It’s really nice when they are on cljsjs
since you don’t have to do much. There are some downsides to that in terms of advanced optimizations I guess, but hasn’t bothered me as of yet.
yeah, I know about cljsjs, but it has it's limits... trying it the other way now.