Fork me on GitHub
#reagent
<
2017-12-13
>
kurt-o-sys09:12:07

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.

kurt-o-sys09:12:04

for some reason, the modules are not found, although they are there (they are listed in ls <project-home>/ui-app/node_modules)

danielbraun10:12:25

@kurt-o-sys Is it possible :npm-deps is not in the correct place in project.clj?

danielbraun10:12:51

also, make sure you have @cljs-oss/module-deps installed in node_modules

danielbraun10:12:00

It's a dependency for the CLJS compiler

danielbraun10:12:55

I've been to hell and back with npm-deps....

kurt-o-sys10:12:29

Well, the modules are downloaded when I run lein ..., so I guess they are in the right place.

kurt-o-sys10:12:21

cljs-oss/module-deps... let me check

danielbraun10:12:51

also some react versions are not compatible with the google closure compiler

kurt-o-sys10:12:01

react 15.3.1?

danielbraun10:12:18

that's a relatively old one, it's probably okay.

kurt-o-sys10:12:32

yeah, reagent 0.7.0 is using that one ( I think) 😛

danielbraun10:12:33

I don't recommend using the NPM-deps feature yet, really

kurt-o-sys10:12:54

oh, ok... so, how do I import existing react modules the better way?

danielbraun10:12:54

too much magic going on

danielbraun10:12:21

react-flatpickr right?

kurt-o-sys10:12:01

right, but it can be any react component.

danielbraun10:12:04

1. It's not on CLJSJS 2. It doesn't have UMD build when installed via NPM

danielbraun10:12:52

It depends on the module

danielbraun10:12:27

you'll have to use browserify to compile a dependency bundle for this

kurt-o-sys10:12:32

so, basically, it's impossible to add any random existing npm react component to a reagent project?

danielbraun10:12:14

you can anything, but the difficulty of integration depends on the module

danielbraun10:12:34

some modules like react-bootstrap are already on CLJSJS

danielbraun10:12:45

you can install*

kurt-o-sys10:12:52

yeah, well, that's what I tried earlier, and didn't succeed - but I can try again

danielbraun10:12:52

I should write a blog post about it really

danielbraun10:12:06

it's tricky sadly

kurt-o-sys10:12:11

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 )

danielbraun10:12:32

many react components can only be required via "require" or "import", they don't expose their object in the js/window object

danielbraun10:12:03

aka they don't have a UMD build

danielbraun10:12:34

so to import them you'll need to use webpack/browserify

danielbraun10:12:10

now, the closure compiler CAN do this.. but.. those modules also require react and react-dom in the same manner

kurt-o-sys10:12:28

ok... so that's why I added them to the npm-deps, right?

danielbraun10:12:37

and you're already using react via cljsjs, you can't use 2 different copies of react in the same page

danielbraun10:12:13

yeah ideally npm-deps should solve it

kurt-o-sys10:12:49

so I exclude it from reagent and include it in the npm-deps.

kurt-o-sys10:12:38

I got it so far... so the problem is the umd build?

danielbraun10:12:03

if there was a UMD you could just stick it in a script tag and call it a day

kurt-o-sys10:12:47

so, if I add webpack to the dependencies, it may work?

kurt-o-sys10:12:06

I mean, what npm-deps does, looks the same as what is described in http://blob.tomerweller.com/reagent-import-react-components-from-npm ?

kurt-o-sys10:12:26

oh, and I should add a webpack setup...

danielbraun10:12:14

it's not a pleasant journey to make it work

danielbraun10:12:51

i would say - try to write the wrapper for flatpickr yourself

kurt-o-sys10:12:54

right, I agree.

kurt-o-sys10:12:15

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 🙂

danielbraun10:12:11

You can get any component to work, but it requires understanding javascript modules and build tools

danielbraun10:12:56

again, the integration difficulty varies by the module

danielbraun10:12:19

react-flatpickr is of the kind that is the hardest to integrate

kurt-o-sys10:12:59

🙂 - so well, I'll give it another try

kurt-o-sys10:12:55

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 😛

danielbraun10:12:32

well, there's still Leiningen and the google closure compiler. But I get what you mean

kurt-o-sys11:12:52

thx for the info!

mikerod14:12:26

@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

mikerod14:12:58

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.

mikerod14:12:18

Hopefully the node-modules stuff gets smoother over time

kurt-o-sys14:12:30

yeah, I know about cljsjs, but it has it's limits... trying it the other way now.