Fork me on GitHub

hi, how can I add a class to a DOM element dynamically? Like I have [ but I want to like if something then add another class to that div


[:div {:class [:x :y (when z? :z]} ...]


hi, I am trying to follow Reactive with ClojureScript Recipes and can't seem to understand why I am getting this complaing: Uncaught TypeError: Cannot set property 'value' of null at goog.History.update_ (history.js?zx=r1oaxet69n5k:905) at goog.History.onHashChange_ (history.js?zx=r1oaxet69n5k:593) at (events.js?zx=o0es7lq25agk:753) at (events.js?zx=o0es7lq25agk:879) at f (events.js?zx=o0es7lq25agk:296)


I get that complaint when clicking on a link to move to the other page. the idea is to build a multi page react app using secretary only


now, I have ran the code from the book, and it worked, but it won't work in my copy of the code. the only difference I am aware of is that the book's repo uses boot whereas I am using leiningen


would anyone have any idea what is happening?


the core.cljs code is the same in both repos... I use the same browser to run both apps. there are dependencies in build.boot that are not in either my project.clj or core.cljs


It doesn't look like a complete stack trace. Can you expand it and post the full version?


Uncaught TypeError: Cannot set property 'value' of null at goog.History.update_ (history.js?zx=r1oaxet69n5k:905) at goog.History.onHashChange_ (history.js?zx=r1oaxet69n5k:593) at (events.js?zx=o0es7lq25agk:753) at (events.js?zx=o0es7lq25agk:879) at f (events.js?zx=o0es7lq25agk:296)


[email protected]?zx=kfvgrrf3mblh:905 [email protected]?zx=kfvgrrf3mblh:593 [email protected]?zx=8jn41k7kh75c:753 [email protected]?zx=8jn41k7kh75c:879 [email protected]?zx=8jn41k7kh75c:296


Ah, OK. But notice the previous warning about write - it's possible that some file could not be loaded because of it. I'd try to get rid of the warning first. Perhaps your JS bundle is included in your HTML as <script async ...>?


thanks for your time man. my script is not loaded with async... however, another difference I haven't mentioned earlier between my code and that from the book's repo is that core.cljs in the book repo has (defn ^:export main ...) whereas mine only has (defn main [] ...) and then calls (main) after that. maybe this is the problem


and then in index.html, the code from the book just has <script src="main.js"></script>


and no callin of main as (main)... perhaps this is what 'unless explicitly opened' means in "It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."


The code from the book also has to call main somewhere. Since the symbol is exported, perhaps it's not (main) but rather project.core.main(). Or maybe it adds main as a callback for onload.


No, the "unless explicitly opened" part means something different.


this is all the html in the book's code:

<html lang="en">
    <div id="app"></div>
    <script src="main.js"></script>


In any case, books get outdated, versions diverge and so on. I would try just a regular Reagent how-to/tutorial first to make sure that the basics are taken care of.


alright, thanks. if you happen to have a link to such tutorial, please feel invited to share


(reload :on-jsload 'hello.core/main) this is in build.boot so I guess that is where the main function is being called


now I tried playing with, but could not break the code to behave same as my repo... this is weird


Perhaps some kind of cache.


well, the code did break, but just not the same as my repo


will have to see what I haven't tried yet... but, yes, thanks for your time. let me let you go


BTW a small correction to what I said before - you need not a Reagent tutorial specifically, but a ClojureScript tutorial for browsers. All in all, the initial steps are usually pretty simple but they can depends on the build tool that you're using.


For example, I use shadow-cljs and it has a pretty good quick start on its GitHub page:


thanks. yes, there seems to be something in the shape of the code that executes that is the culprit. the book code has these two dependencies adzerk.boot-cljs and adzerk.boot-reload. these two seem to do something that my lein & project.clj don't


Oh. So seems like the book uses Boot but you're using Leiningen, probably with figwheel figwheel-main. Goes to confirm my statement about books getting outdated. :) Very few people use Boot nowadays.


Given that there can be absolutely anything in those namespaces (maybe crucial to the whole book, maybe not), I would consider trying a different book. Or better yet, online resources that have a much higher chance of staying up to date.


yes, apparently I am following outdated resources


I reinitialized my project with the following command

lein new reagent-figwheel <project-name>
and the same code now works fine. I still do not know why it works, but at least this allows me to progress through the book. the interesting thing is that my project.clj has this funy line:
:figwheel     {:on-jsload "reframe-reagent.core/reload"}
that I suspect has a lot to do with it working. will have to investigate further. just thought I put this here, and let you know also


but, no, that is not it... that line is in my other repo also.. hmmm... anyways...

Ian Fernandez20:01:18

I do not understand why


you are calling some function with no argument, and the function expects arguments. so, I'd suspect (r/flush) or (rtl/cleanup) needs arguments

Ian Fernandez20:01:32

it was a misstypo on a component

Ian Fernandez20:01:25

[[:button ,,, 😞