reagent 2022-06-27 | Slack Archive

lilactown04:06:27

you can use hooks, but you might not be able to use other react features in the future that build on hooks unless you go all in

lilactown04:06:22

i.e. not use ratoms or re-frame subscriptions in the way that they currently are

lilactown04:06:58

you could have a use-ratom or use-subscription hook tho

pinkfrog13:06:44

What did I do wrong? I am building with shadowcljs. The code is as below:

(ns app.ui.component
  (:require
   [reagent.core :as r]
   ["react-icons" :as icon]))

;; see 
(def icon-context-provider (r/adapt-react-class icon/IconContext.Provider))

(comment
  ;; error happens. Ranger error, Maximum call stack size exceeded.
  (r/as-element [icon-context-provider]))

I also posted at: https://clojureverse.org/t/suffering-rangeerror-maximum-call-stack-size-exceeded-error-with-reagent-and-react-icons-library/9049

p-himik13:06:35

What's the stacktrace? Always post stacktraces when trying to get help with an exception of any kind.

pinkfrog14:06:02

Say I execute the

(r/as-element [icon-context-provider])

In the repl, I got:

:repl/print-error!
; The result object failed to print. It is available via *1 if you want to interact with it.
; The exception was: 
; RangeError: Maximum call stack size exceeded
cljs꞉app.ui.component꞉>

p-himik14:06:06

The result object failed to print

That's the error. The code works fine. It's just that your REPL can't print it.

p-himik14:06:54

Also, that's not a stacktrace. Usually, when you encounter an exception in a REPL, evaluating *e will give you the full exception. Not sure about this particular case though, since the error is coming not from your code but from within the REPL itself.

pinkfrog14:06:59

Understood. But the underlying error is when the repl tries to printing it, it suffers RangeError: Maximum call stack size exceeded.

p-himik14:06:11

And why is that important? Just don't print the value.

pinkfrog14:06:26

I have another more complicated example that does not invovling printing, but has the RangeError: Maximum call stack size exceeded issue.

pinkfrog14:06:45

Let me make that example.

pinkfrog14:06:36

Problem got solved. But the reason is still a bit curious to me. The offending code is

(defn- panes
  []
  [:div
   (for [{:keys [icon color label] :as item} sidebar-items]
     ^{:key label} 
     [sidebar-item item])])
If I remove the `^{:key label}`

I will see

[41447:0627/220619.804217:INFO:CONSOLE(33569)] "Uncaught RangeError: Maximum call stack size exceeded", source: js/cljs-runtime/cljs.core.js (33569)
[41447:0627/220619.806073:INFO:CONSOLE(333)] "The above error occurred in the <app.view.panes> component:

    at app.view.panes (js/cljs-runtime/reagent.impl.component.js:499:43)
    at div
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$Box$Box.js:2:296)
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$AppShell$HorizontalSection$Section$Section.js:2:267)
    at nav
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$Box$Box.js:2:296)
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$AppShell$HorizontalSection$HorizontalSection.js:4:280)
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$AppShell$Navbar$Navbar.js:2:495)
    at div
    at div
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$Box$Box.js:2:296)
    at eval (js/cljs-runtime/module$node_modules$$mantine$core$cjs$components$AppShell$AppShell.js:3:69)
    at MantineProvider (js/cljs-runtime/module$node_modules$$mantine$styles$cjs$theme$MantineProvider.js:1:144)
    at G__28235 (js/cljs-runtime/reagent.impl.component.js:499:43)
    at app (js/cljs-runtime/reagent.impl.component.js:499:43)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit

p-himik14:06:02

When you remove :key, Reagent (or React maybe, don't recall) will try to print the offending component. Yeah, it's problematic. If you can create a minimal reproducible example, it's worth an issue in the Reagent's repo. I bet the original error should actually be just a warning about a missing key. Usually it works fine, but seems like your case is for some reason breaks the printing.

pinkfrog14:06:53

I see. It still boils down to the printing of the offending element.

p-himik14:06:43

Yes, indeed. Initially, I didn't realize that there are reasons for why one would actually want to print something like it.

pinkfrog14:06:42

Back to the original example

(r/as-element [icon-context-provider])

Do you have any clue, or how do I track where the infinite recursion happens?

p-himik14:06:59

You can open the DevTools in your browser where the resulting JS code is evaluated and enable it to break on all exceptions.

2022-06-27

Channels