Fork me on GitHub
#reagent
<
2018-06-11
>
fabrao02:06:56

Hello all, I´m trying to use reagent-template, but when I start it from cider, the error shows up Call to clojure.core/fn did not conform to spec. What´s wrong?

pesterhazy08:06:20

check your clojure and clojurescript versions

pesterhazy08:06:56

if you want a quick fix, you could try https://github.com/bhauman/figwheel-template instead (which is used more)

pesterhazy08:06:15

also can you print the entire error?

bfast19:06:21

Does anyone have an example of using npm-deps to load a Clojurescript react library with Reagent 16.4.0? I cannot get it to work for the life of me. I have tried adding npm deps for react-dom,react,create-react-class and adding cljsjs externs for those librariesthe cljsjs packages for those libraries

bfast19:06:35

reagent 0.8.1 and react 16.4.0 I mean

lee.justin.m19:06:15

are you sure you want to use npm-deps? that feature is pretty experimental and it will run you javascript through the advanced closure compiler. if the code isn’t ready for that, it will break

lee.justin.m19:06:10

i’d either use shadow-cljs, or use foreign-libs with webpack

bfast19:06:10

So basically the most popular foreign JS library breaks with npm-deps and the most popular CLJS front-end library (reagent) ?

lee.justin.m19:06:10

right. and the documentation for the feature doesn’t really explicitly tell you what it does. and nobody is really supporting it. and the most visible article on the feature strongly suggests that it’s a good idea to use it.

pesterhazy19:06:28

I think you can make reagent work, but agree with @lee.justin.m that you'll have an easier time with one of the option he mentioned

bfast19:06:17

I have yet to see any evidence of Reagent 0.8.1 + a npm React library working through npm-deps... sorry just frusterated

bfast19:06:33

I guess webpack it is

pesterhazy19:06:54

I understand the frustration

lee.justin.m19:06:58

you have every right to be frustrated. it’s objectively frustrating.

bfast19:06:16

The npm deps option should be removed from the reagent readme

bfast19:06:22

and Removed from the CLJS documentation

lee.justin.m19:06:32

for what it is worth, shadow-cljs makes this work super smoothly and does what you probably expected npm-deps to do

juhoteperi19:06:47

npm-deps is not mentioned in the readme

pesterhazy19:06:47

if you have some time to build a repro, you could try filing an issue in the reagent github

lee.justin.m19:06:48

it also does externs inference incredibly well

bfast19:06:25

npm-deps is mentioned in the .8 upgrade guide

juhoteperi19:06:40

And upgrade guide mentions Cljsjs foreign libs is the recommended setup

bfast19:06:01

The problem is that I want to use someone else's react library which is only published through npm

bfast19:06:18

I guess I could package it up with webpack and see how that goes

mikerod19:06:52

yes, you can webpack bundle it

mikerod19:06:08

or shadow-cljs if that’s the direction you like

pesterhazy19:06:23

if you want to use cljsjs, you can use one of the cljsjs deps as a template and modify that

pesterhazy19:06:34

in my experience that gets tedious after a while

pesterhazy19:06:59

for me frictionless access to any and all npm react libs is important

pesterhazy19:06:23

the "double bundle" approach gives you just that (and from what I hear shadow-cljs does too)

mikerod19:06:39

@ I like the double bundle approach so far (recently started using it more). A few things that I need to solve still though: * Integrating it into a build appropriately - would be ideal to have lein have a pre-process step that did the yarn build or whatever that builds the bundle via webpack * If I have a “library module” of cljs that I want to use in another project, then that lib won’t have it’s bundle included, so this means I’d have to “inherit” it’s double bundle config somehow (if that makes sense) Just curious if you have ran into these issues

pesterhazy19:06:48

re: building, this is as simple as running yarn build or npm run build before lein dev. Yes it's a separate step but (a) it only has to be rerun when package.json changes and (b) it's pretty fast

pesterhazy19:06:20

you can also add a wrapper script scripts/dev that does yarn build && lein dev

pesterhazy19:06:42

not sure I understand what you mean by "library module"

pesterhazy19:06:39

can you explain more?

mikerod20:06:11

re: building - that is reasonable. I think I wouldn’t want to checkin the node_modules or the actual bundle (pretty big things and may have a dev vs prod build), so I would need to have some build script that could be run like on a CI server or someone else’s machine to install without too much trouble.

mikerod20:06:23

I think that is doable though, a script wouldn’t be that bad if needed

mikerod20:06:08

> not sure I understand what you mean by “library module” So to try to explain: if I have a cljs project A that has, eg common Reagent components in it Say A uses a few :foreign-libs via a double bundle approach, like it uses react-datepicker perhaps. Now I have a cljs project B that is using A. It will have to redeclare all of As webpack config to get the same dependencies loaded as A did, since they won’t just “be on the classpath” or automatically put into :foreign-libs I believe.

mikerod20:06:33

So the problem really is the “transitive dependencies” problem

mikerod20:06:48

B -> A -> (foreign) react-datepicker

pesterhazy17:06:44

Right yeah you’d have to duplicate the deps

mikerod17:06:09

And worse, I think you have to duplicate the webpack config and package.json stuff.

mikerod17:06:20

It makes it a little annoying. Still doable of course.

mikerod17:06:02

I mean you can configure it differently but you have to config it in a way that includes all the transitive deps that this lib depends on.

pesterhazy19:06:45

cljsjs and npm-deps, unfortunately, don't

pesterhazy19:06:15

(that being said, if you don't need unpackaged npm libs, cljsjs is the best user experience for beginners)

bfast19:06:01

right, thanks for the help guys

bfast19:06:14

I guess invoking shadow-cljs from leiningen is another option