Using :> results in "Cannot convert a Symbol value to a string"

[lilactown]

Using reagent 0.8.0 & React 16.3.2, I'm trying to leverage React's new context API.

Repro:

package.json:

{
  "devDependencies": {
    "shadow-cljs": "^2.3.11"
  },
  "dependencies": {
    "create-react-class": "^15.6.3",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  }
}

src/context/core.cljs:

(ns context.core
  (:require [reagent.core :as r]
            ["react" :as react]))

(defonce my-context (.createContext react))
 
(defn page []
  (let [Provider (.-Provider my-context)
        Consumer (.-Consumer my-context)]
    [:> Provider {:value "hey"}
     [:> Consumer {}
      (fn [v]
        (r/as-element [:div v]))]]))

(defn start []
  (r/render [page] (.getElementById js/document "app")))


(defn ^:export init [] (start))

Results in this stack-trace:

core.cljs:2944 Uncaught TypeError: Cannot convert a Symbol value to a string
    at Array.join (:8700/app/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:9994)
    at cljs$core$pr_writer (core.cljs:10003)
    at core.cljs:10126
    at Object.cljs$core$pr_sequential_writer [as pr_sequential_writer] (core.cljs:9857)
    at Object.cljs$core$print_prefix_map [as print_prefix_map] (core.cljs:10121)
    at cljs$core$print_map (core.cljs:10135)
    at Object.cljs$core$pr_writer_impl [as pr_writer_impl] (core.cljs:9939)
    at cljs$core$pr_writer (core.cljs:10003)

Changing to r/adapt-react-class makes it work as expected:

(ns context.core
  (:require [reagent.core :as r]
            ["react" :as react]))

(defonce my-context (.createContext react))

(defn page []
  (let [Provider (.-Provider my-context)
        Consumer (.-Consumer my-context)
        ]
    [(r/adapt-react-class Provider) {:value "hey"}
     [(r/adapt-react-class Consumer) {}
      (fn [v]
        (r/as-element [:div v]))]]))

(defn start []
  (r/render [page] (.getElementById js/document "app")))


(defn ^:export init [] (start))

[Deraen]

This is because (.-Provider my-context) and (.-Consumer my-context) return JS Symbol or object containing one, not sure, and this will fail the assertion here: https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/template.cljs#L389

Additionally the hiccup-err is not able to convert Symbol to string for error message, so that will cause another error.

[jdf-id-au]

I'm getting exactly the same behaviour (r/adapt-react-class works, :> doesn't; same error) when using material-ui (4.1.3) objects like mui/Button via shadow-cljs (2.8.39) (:require ["@material-ui/core" :as mui]...) on reagent 0.8.1 and cljs 1.10.520.

Edit Oh goddamnit seems to be a problem with the way shadow-cljs handles :extra-deps in deps.edn! Seems to be working when I put reagent in the main :deps section instead.

[p-himik]

I think this is not entirely fixed. I just tried to use a :key property instead of specifying it in the metadata of a [:> ...] component.
Reagent tried to warn me by saying Every element in a seq should have a unique :key. Unfortunately, that particular warning also tries to output the whole component as a string.
A relevant CLJS ticket: Make instances of js/Symbol printable

[saikyun]

I have this problems as well, using @material-ui.core. E.g.:

(ns wat (:require ["@material-ui/core" :refer [Box]]))

(println (let [children ["a" "b"]]
           [:> Box {:p 2} children]))

Breaks for me. Changing :> Box to :div or (r/adapt-react-class Box) makes it work again.

[pavel-klavik]

Same for me with @material-ui.core, still unresolved in reagent 0.10.0. It was failing on the following code:

(defn tooltip-wrap
  "When tooltip is not nil, it wraps the given component with a tooltip."
  [component tooltip id]
  (if tooltip
    [:> Tooltip {:key   id
                                    :title tooltip
                                    :arrow true} component]
    component))

(for [{:tab/keys [id label tooltip]} tab-list]
       (tooltip-wrap [:> Tab {:key   id
                              :label label}] tooltip id))

when for is used within another component.

[Deraen]

#399 is now fixed (in master) so at least Reagent shouldn't try showing those warnings. In case the element really is missing a key, next ClojureScript release will make Symbols printable so the warning will be printed correctly.

[Deraen]

Symbol is printable since Cljs 1.10.741, closing as the Reagent bug that caused bad warning is fixed, and new Cljs will be able to show error messages in proper warning cases.