render-component blocking about reagent

[jivagoalves]

I'm experiencing the same problem with piggieback. I evaluate code from my Vim buffer using piggieback so that I can connect the browser to the cljs repl. In other words, I can evaluate code, log to browser's console, display alert boxes, etc.

As soon as I evaluate render-component I see the rendered component on the page, however, Vim hangs there and I lose control of the cursor (it blocks). At the same time the following exception (Broken pipe) appears in the repl:

user=> java.net.SocketException: Broken pipe                                                                                                   [15/30]
        at java.net.SocketOutputStream.socketWrite0(Native Method)
        at java.net.SocketOutputStream.socketWrite(SocketOutputStream.java:113)
        at java.net.SocketOutputStream.write(SocketOutputStream.java:159)
        at sun.reflect.GeneratedMethodAccessor9.invoke(Unknown Source)
        at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
        at java.lang.reflect.Method.invoke(Method.java:606)
        at clojure.lang.Reflector.invokeMatchingMethod(Reflector.java:93)
        at clojure.lang.Reflector.invokeInstanceMethod(Reflector.java:28)
        at cljs.repl.server$send_and_close.invoke(server.clj:125)
        at cljs.repl.browser$send_for_eval.invoke(browser.clj:40)
        at cljs.repl.browser$send_for_eval.invoke(browser.clj:37)
        at cljs.repl.browser$browser_eval.invoke(browser.clj:160)
        at cljs.repl.browser.BrowserEnv._evaluate(browser.clj:186)
        at cljs.repl$evaluate_form.invoke(repl.clj:113)
        at cemerick.piggieback$cljs_eval$fn__4436.invoke(piggieback.clj:115)
        at clojure.lang.AFn.applyToHelper(AFn.java:152)
        at clojure.lang.AFn.applyTo(AFn.java:144)
        at clojure.core$apply.invoke(core.clj:624)
        at clojure.core$with_bindings_STAR_.doInvoke(core.clj:1862)
        at clojure.lang.RestFn.invoke(RestFn.java:425)
        at cemerick.piggieback$cljs_eval.invoke(piggieback.clj:97)
        at clojure.lang.AFn.applyToHelper(AFn.java:160)
        at clojure.lang.AFn.applyTo(AFn.java:144)
        at clojure.core$apply.invoke(core.clj:624)
        at cemerick.piggieback$cljs_repl$fn__4480.doInvoke(piggieback.clj:173)
        at clojure.lang.RestFn.invoke(RestFn.java:436)
        at clojure.lang.Var.invoke(Var.java:388)
        at perfection.core$eval15075.invoke(form-init1530033766751938863.clj:1)
        at clojure.lang.Compiler.eval(Compiler.java:6703)
        at clojure.lang.Compiler.eval(Compiler.java:6666)
        at clojure.core$eval.invoke(core.clj:2927)
        at clojure.main$repl$read_eval_print__6625$fn__6628.invoke(main.clj:239)
        at clojure.main$repl$read_eval_print__6625.invoke(main.clj:239)
        at clojure.main$repl$fn__6634.invoke(main.clj:257)
        at clojure.main$repl.doInvoke(main.clj:257)
        at clojure.lang.RestFn.invoke(RestFn.java:1096)
        at clojure.tools.nrepl.middleware.interruptible_eval$evaluate$fn__589.invoke(interruptible_eval.clj:56)
        at clojure.lang.AFn.applyToHelper(AFn.java:152)
        at clojure.lang.AFn.applyTo(AFn.java:144)
        at clojure.core$apply.invoke(core.clj:624)
        at clojure.core$with_bindings_STAR_.doInvoke(core.clj:1862)
        at clojure.lang.RestFn.invoke(RestFn.java:425)
        at clojure.tools.nrepl.middleware.interruptible_eval$evaluate.invoke(interruptible_eval.clj:41)
        at clojure.tools.nrepl.middleware.interruptible_eval$interruptible_eval$fn__630$fn__633.invoke(interruptible_eval.clj:171)
        at clojure.core$comp$fn__4192.invoke(core.clj:2402)
        at clojure.tools.nrepl.middleware.interruptible_eval$run_next$fn__623.invoke(interruptible_eval.clj:138)
        at clojure.lang.AFn.run(AFn.java:22)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
        at java.lang.Thread.run(Thread.java:745)

[jivagoalves]

It turns out the problem was related to how I was rendering the component. I had an index.html with js scripts included inside <body>. In addition I was using <body> element as root so my scripts were being lost because react rendered the whole body. As a quick solution I added an new element as root of my app:

<body>
  <div id="app"></div>
</body>

Then I passed in the new element to the render-component instead:

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

[holmsand]

Closing this.