Fork me on GitHub
#reagent
<
2018-09-06
>
Hukka07:09:54

Hmh. How should I debug "error rendering component" when all I get is

core.cljs:2944 Uncaught TypeError: Cannot convert a Symbol value to a string
    at Array.join (:8800/native)
    at Function.cljs.core.str.cljs$core$IFn$_invoke$arity$1 (core.cljs:2944)
    at Object.cljs$core$pr_writer_impl [as pr_writer_impl] (core.cljs:10000)
    at cljs$core$pr_writer (core.cljs:10009)
    at core.cljs:10132
    at Object.cljs$core$pr_sequential_writer [as pr_sequential_writer] (core.cljs:9863)
    at Object.cljs$core$print_prefix_map [as print_prefix_map] (core.cljs:10127)
    at cljs$core$print_map (core.cljs:10141)
    at Object.cljs$core$pr_writer_impl [as pr_writer_impl] (core.cljs:9945)
    at cljs$core$pr_writer (core.cljs:10009)

pesterhazy07:09:57

Sounds like there’s a JS Symbol somewhere

pesterhazy07:09:33

Es6 symbols are rarely encountered but React uses them under the hood

Hukka07:09:50

Indeed... but is there any way to get a useful stack trace that shows where?

Hukka07:09:19

All I can see is "somewhere inside this parent component"

Hukka07:09:25

Somehow it seems that it's related to using for

Hukka07:09:02

The same [:>] component in a let, with single pair of values works ok, but inside [:div (for)] it gives that symbol error

Hukka07:09:38

;Works
(let [selected-dows @(re-frame/subscribe [::subs/selected-dows])
         [dayname number] ["Maanantai" "1"]]
     [:> FormControlLabel
      {:label dayname
       :control (reagent/create-element
                  Checkbox
                   (clj->js {:checked (contains? selected-dows number)
                             :onChange #(re-frame/dispatch [:events/toggle number %2])}))}])
; Doesn't work
(let [selected-dows @(re-frame/subscribe [::subs/selected-dows])]
       [:div
        (for [[dayname number] [["Maanantai" "1"]]]
          [:> FormControlLabel
           {:label dayname
            :control (reagent/create-element
                       Checkbox
                        (clj->js {:checked (contains? selected-dows number)
                                  :onChange #(re-frame/dispatch [:events/toggle number %2])}))}])]

Hukka08:09:52

(into [:div]) works... But why?

Hukka08:09:59

Even simply trying to log those above hiccups instead of rendering them will cause cljs-devtools to fail with the same error. Without devtools the difference is that for gives a lazy seq, with identical contents. So what's the symbol?

Hukka08:09:47

And for more context, it used to work with cljsjs material ui components, without the :>

pesterhazy11:09:40

too much going on in the example, can you boil it down?

pesterhazy11:09:11

if you ask me (into [:div]) is preferable anyway to the magic with lazy seqs

pesterhazy11:09:43

if you feel like it you can wrap the for in a doall

justinlee15:09:00

odd that :> breaks but reagent/adapt-react-class works

justinlee15:09:24

though the bigger issue appears to be in cljs-devtools itself https://github.com/binaryage/cljs-devtools/issues/25

justinlee15:09:49

there’s a patch to fix str but it has stalled https://dev.clojure.org/jira/browse/CLJS-1628

justinlee15:09:05

amusingly i ran into this same issue when i was first starting out in clojurescript but forgot all about it https://clojurians-log.clojureverse.org/clojurescript/2018-01-19

Hukka17:09:26

@lee.justin.m I don't think so, since without the for everything works, as does when using into

Hukka17:09:39

The lazy seq is somehow the linchpin there

justinlee17:09:45

@tomi.hukkalainen_slac yea, there are 2 layers of bugs: one is the ultimate cause of your error. the second level is the printing bug that makes it impossible to figure out what’s actually going wrong

pesterhazy18:09:12

ES6 Symbols are such a weird feature

pesterhazy18:09:24

without a literal to create them