Fork me on GitHub
#reagent
<
2016-05-04
>
michael.heuberger01:05:56

hello guys, i am experiencing a weird issue here. maybe someone knows and can help?

michael.heuberger01:05:14

seeing an Uncaught TypeError: Cannot read property 'call' of undefined here in latest Chrome

michael.heuberger01:05:27

code is dead simple:

(ns abc.app
  (:require [cljsjs.material-ui]                           
            [cljs-react-material-ui.core :as mui]
            [cljs-react-material-ui.reagent :as rui]      
            [reagent.core :as reagent :refer [atom]]))

(defn content []
  [:main
   [:h2 "Main Content"]])

(defn init []
  (reagent/render-component [content]
    (.getElementById js/document "app")))

mikethompson01:05:14

what is :main ?

mikethompson02:05:44

Also, my advice is to never :refer atom. Always use reagent/atom. If you get in the habit of using atom it is just a matter of time before you'll end up with a clojure atom, and that's a damn hard bug to find for anyone new.

mikethompson02:05:54

============================================ EVERYONE The transition to React 15 appears to have been a success, There's now a [reagent "0.6.0-alpha2"] available. We are waiting on one more code drop from Dan. We will then cut a "release candidate". Please switch to using this alpha2 and tell us about any problems here: https://github.com/reagent-project/reagent/issues/212

michael.heuberger02:05:13

@mikethompson: <main> is a valid html tag

michael.heuberger02:05:52

@mikethompson: thanks for the reagent/atom advice, will do

mikethompson02:05:51

Which version of Reagent are you using?

michael.heuberger02:05:07

[reagent "0.6.0-alpha" :exclusions [org.clojure/tools.reader cljsjs/react]]

mikethompson02:05:39

Try alpha2 ... which will give you React 15

michael.heuberger02:05:06

ok, trying now ...

michael.heuberger02:05:26

ah, it worked - thanks simple_smile

mikethompson02:05:28

Apart from that, I can't see anything wrong.

michael.heuberger02:05:43

thanks man, you saved the day heh

mikethompson02:05:47

I'm still suspicious of that main simple_smile

mikethompson02:05:01

Don't like these new-fangled things simple_smile

michael.heuberger02:05:13

it is a valid html tag with good semantics

michael.heuberger03:05:04

@mikethompson: do you have an idea why alpha2 made a difference, the above error disappears?

mikethompson03:05:38

My guess is that alpha2 is React15

mikethompson03:05:00

My guess is that :main might not have be properly supported previous. But just a guess.

mikethompson03:05:32

To test that theory, you could go back to alpha and replace :main with :div and see what happens

hugobessaa11:05:38

@michael.heuberger: take care of main as some browsers do not support it. this has bitten me once.

hugobessaa11:05:46

the caniuse website warns about some browsers not styling this element correctly. beware

lwhorton17:05:16

ive been digging around for about 30 mins trying to find the root of this problem : No item [ .. some hiccup ] in vector of length 3 . Can anyone point me in a direction? My thoughts were maybe I’m accidentally returning a vector without a root (not tucked under a div or an ol, for example)… but that’s not it?

lwhorton17:05:37

I am using map-indexed in a few places, and was wondering if that’s screwing up reagent’s [function props…] syntax somehow by clobbering a closure somewhere

hugobessaa17:05:01

Can you post the hiccup? @lwhorton

lwhorton17:05:49

sure let me make it a little generic

lwhorton17:05:19

okay, this is a stripped down implementation:

(defn- render-row [{:keys [row]}]
  [:ol
   (vec (map-indexed (fn [idx it] [:li (str it)]) row))])
where I might invoke render-row via [render-row {:row [1 2 3]}]

lwhorton17:05:55

I would expect the output to be something like [:ol [:li 1] [:li 2] … ]

lwhorton17:05:45

when invoked in isolation, it produces the expected hiccup, but when invoked via a chain such as:

(defn render-list []
  [:div (vec 
          (map-indexed 
            (fn [idx row]
              [:li [render-row {:row [1 2 3]}]]) [1 2 3]))])
That’s when I get the No item in vector of length 3 error.

gadfly36117:05:02

can you sketch out what you are hoping to see in the dom? i am a little confused what you are trying to see

lwhorton17:05:45

while moving those pieces over I figured it might be something with lazy sequences? if I use (into [:ol] (map-indexed …)) everything works fine, which makes me more confused.

lwhorton17:05:06

would I have to use (vec (doall (map-indexed …))) otherwise to get them to evaluate?

hugobessaa17:05:50

The result will be [:div [[:li ...] [:li ..]]]

lwhorton17:05:24

oh snap, good catch.

hugobessaa17:05:47

try changing vec to into []

lwhorton17:05:44

thanks @hugobessaa thats enough for me to dig around on my own

hugobessaa17:05:25

@lwhorton I ran into this some times too. maybe reagent could get a better error message for this case. it is pretty common mistake

lwhorton17:05:05

it would be nice to at the very least say something like “you might be returning a nested vector"

hugobessaa17:05:00

yep, I agree

michael.heuberger21:05:48

@hugobessaa: our app is for modern browsers only anyway, so <main> should be fine

michael.heuberger22:05:29

i am having problems here defining a second level navigation with reagent + material ui:

(def nav-mail-link-list
  (list ((mui/list-item {:primary-text "Domains" :key 1 :left-icon (icons/social-domain)})
         (mui/list-item {:primary-text "Mailboxes" :key 2 :left-icon (icons/content-mail)}))))

(defn nav-link-list []
  [rui/list
   [rui/list-item {:primary-text "Dashboard" :left-icon (icons/action-home)}]
   [rui/list-item {:primary-text "Mail" :left-icon (icons/content-mail) :nested-items nav-mail-link-list}]

michael.heuberger22:05:46

that doesn't work and browser complains with core.cljs:2695Uncaught TypeError: Cannot convert a Symbol value to a string

gadfly36123:05:44

shot in the dark, but you may have an extra set of parens in nav-mail-link-list. What happens if you try this:

(def nav-mail-link-list
  (list (mui/list-item {:primary-text "Domains" :key 1 :left-icon (icons/social-domain)})
         (mui/list-item {:primary-text "Mailboxes" :key 2 :left-icon (icons/content-mail)})))

michael.heuberger23:05:32

aaaaah, that worked

magomimmo23:05:10

I just published the in the modern-cljs series the 21th and 22th tutorials: Part I and Part II of a reasoned step by step guide to port the official react tutorial to reagent: https://github.com/magomimmo/modern-cljs/blob/master/doc/second-edition/tutorial-21.md and https://github.com/magomimmo/modern-cljs/blob/master/doc/second-edition/tutorial-22.md

gadfly36123:05:45

@magomimmo: Thanks for sharing this!

lwhorton23:05:39

i can’t seem to find how to use react’s ref= via reagent (or if you can)...

lwhorton23:05:19

is this still the case, or do I have to use regular dom operations?