A minimalistic ClojureScript interface to React.js
Audrius 2021-01-18T15:31:27.010300Z

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

bibiki 2021-01-18T15:31:52.010700Z

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)

bibiki 2021-01-18T15:33:06.011800Z

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

bibiki 2021-01-18T15:34:07.012800Z

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

bibiki 2021-01-18T15:34:22.013100Z

would anyone have any idea what is happening?

p-himik 2021-01-18T15:36:34.014300Z

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

bibiki 2021-01-18T15:36:37.014500Z

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

p-himik 2021-01-18T15:37:38.014600Z

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

bibiki 2021-01-18T15:39:04.014800Z

yes sure

bibiki 2021-01-18T15:39:08.015Z

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)

bibiki 2021-01-18T15:41:46.015200Z

goog.History.update_@history.js?zx=kfvgrrf3mblh:905 goog.History.onHashChange_@history.js?zx=kfvgrrf3mblh:593 f@events.js?zx=8jn41k7kh75c:296

bibiki 2021-01-18T15:42:25.015400Z

p-himik 2021-01-18T16:09:36.015800Z

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 ...>?

bibiki 2021-01-18T16:12:54.016Z

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

bibiki 2021-01-18T16:14:09.016200Z

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

bibiki 2021-01-18T16:15:11.016400Z

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."

p-himik 2021-01-18T16:15:32.016600Z

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.

p-himik 2021-01-18T16:15:47.016800Z

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

bibiki 2021-01-18T16:16:25.017Z


bibiki 2021-01-18T16:16:37.017200Z

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

<!DOCTYPE html>
&lt;html lang="en"&gt;
    &lt;div id="app"&gt;&lt;/div&gt;
    &lt;script src="main.js"&gt;&lt;/script&gt;

p-himik 2021-01-18T16:17:11.017400Z

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.

bibiki 2021-01-18T16:18:58.017600Z

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

bibiki 2021-01-18T16:19:58.017800Z

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

bibiki 2021-01-18T16:20:42.018Z

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

p-himik 2021-01-18T16:22:16.018200Z

Perhaps some kind of cache.

bibiki 2021-01-18T16:23:50.018400Z

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

bibiki 2021-01-18T16:24:31.018600Z

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

p-himik 2021-01-18T16:25:48.018800Z

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.

p-himik 2021-01-18T16:27:36.019Z

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

bibiki 2021-01-18T16:38:09.019300Z

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

p-himik 2021-01-18T16:43:45.019500Z

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.

p-himik 2021-01-18T16:45:02.019700Z

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.

bibiki 2021-01-18T16:48:59.019900Z

yes, apparently I am following outdated resources

bibiki 2021-01-18T18:24:43.020100Z

I reinitialized my project with the following command

lein new reagent-figwheel &lt;project-name&gt;
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

bibiki 2021-01-18T18:25:59.020300Z

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

bibiki 2021-01-18T20:52:59.023Z

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


it was a misstypo on a component


sorry 😞


[[:button ,,, 😞