Clojurians Log v2

Hi, I'm having a little problem that annoys me and I'm pretty sure I'm doing something wrong. Every time I restart shadow-cljs server I have to remove .shadow-cljs/builds folder manually or otherwise I have a console full of errors on the screenshot below. It sometimes burps on optimized builds also, but if I clean the build folder everything is fine. Is it necessary to clean the build folder before each start? I don't remember doing this for my last project.

how do you restart shadow-cljs

I run it with VS Code Terminal/Calva npx shadow-cljs watch app and then kill it with Ctrl-c once I'm done working.

and then try running it again with watch?

I always do shadow-cljs restart when I want to start, because with wsl I often can't cleanly exit. I run this manually, but an npm script should work. Then I start the web interface to shadow-cljs on 9630 and press watch there.

@bear-z you shouldn't need to remove the cache folder ever so whatever is happening could be considered a bug. but I cannot tell what you are doing so without a reproducible example I can't say much. might be some bad config. might be 2 instances of shadow-cljs running for the project and interfering with each other. might be bad macros, really can't say.

I'm finally moving over the shadow-cljs and have started shadow-cljs watch :app in the terminal, which has run through successfully to Build completed. but I'm having troubling jacking into cljs via cider with the option shadow for repl-type and :app for the cljs build selection:

;; ClojureScript REPL type: shadow
;; ClojureScript REPL init form: (do (require '[shadow.cljs.devtools.api :as shadow]) (shadow/watch :app) (shadow/nrepl-select :app))
;;
Execution error (ExceptionInfo) at shadow.cljs.devtools.server.runtime/get-instance! (runtime.clj:11).
shadow-cljs has not been started yet!
In embedded mode you need to call (shadow.cljs.devtools.server/start!) to start it.
If you have a shadow-cljs server or watch running then you are not connected to that process.

If I cider-connect-sibling-cljs to localhost:9123 followed by shadow-select and :app build then I just see:

:missing-nrepl-middlewareuser>

With the incantation below to resolve the missing NREPL middleware warning:

(eval . (progn
         (make-variable-buffer-local 'cider-jack-in-nrepl-middlewares)
         (add-to-list 'cider-jack-in-nrepl-middlewares "shadow.cljs.devtools.server.nrepl/middleware")))

;; ClojureScript REPL type: shadow-select
;; ClojureScript REPL init form: (do (require '[shadow.cljs.devtools.api :as shadow]) (shadow/nrepl-select :app))
;;
Execution error (ExceptionInfo) at shadow.cljs.devtools.server.runtime/get-instance! (runtime.clj:11).
shadow-cljs has not been started yet!
In embedded mode you need to call (shadow.cljs.devtools.server/start!) to start it.
If you have a shadow-cljs server or watch running then you are not connected to that process.

cider-connect-cljs to `localhost:9123` followed by `shadow-select` and `:app` however does gives me a REPL, I can (js/alert ...) etc, but working on a cljs file and jumping to REPL still gives cider--no-repls-user-error: No cljs REPLs in current session "Farillio/app:localhost:9123" and #?(:cljs ...) code in cljc files is still grayed out (no syntax highlighting) 😢

Was really hoping I could just run the shadow-cljs watch... in a terminal, add

(cider-default-cljs-repl . shadow)
     (cider-shadow-default-options . "app")

@codeasone I don't use emacs so the help I can provide is rather limited. to me it looks like you didn't add the cider-nrepl middleware to your dependencies. when you run shadow-cljs watch separately cider cannot inject it automatically so you need to add it manually. don't know how jack-in stuff works these days, but connecting remotely is totally fine and even what I'd recommend doing

Thanks for your input @thheller - the cider-nrepl dependencies are auto-injected by cider - I'm making some progress with:

(cider-default-cljs-repl . custom)
     (cider-custom-cljs-repl-init-form . "(do (user/cljs-repl))")
     (eval . (progn
               (make-variable-buffer-local 'cider-jack-in-nrepl-middlewares)
               (add-to-list 'cider-jack-in-nrepl-middlewares "shadow.cljs.devtools.server.nrepl/middleware")))

;; <https://github.com/clojure-emacs/cider/issues/2812#issuecomment-613127286>
(defn cljs-repl
  ([]
   (cljs-repl :app))
  ([build-id]
   (server/start!)
   (shadow/watch build-id)

but it's not recompiling on source changes and visiting the app I see:

Ho-hum... looks like I'm going to have to dig into the cider code and gain greater familiarity with shadow-cljs to debug

@codeasone the stale output warning could mean that you now have two instances of shadow-cljs running. that is what I meant by connecting vs. jack-in.

you are now starting the server in embedded mode in the JVM. you are not connecting to the shadow-cljs watch you started separately

> the cider-nrepl dependencies are auto-injected by cider

as I said .. that is only done when you jack in .. that is NOT done if you connect remotely

I think I've found a working solution with none of the hacks above

no clue how current this is either https://shadow-cljs.github.io/docs/UsersGuide.html#cider

cider-jack-in-clj with clojure-cli to run the backend, then separately cider-jack-in-cljs (no piggy-backing) with shadow-cljs

I'd suggest connecting but jack-in is fine too

watcher is running fine, and the two REPLs are associated with the correct clj|cljs buffers for jump-to-repl purposes - removed all hacks in dir-locals.el and user.clj 🎉

thanks for your patience and consideration @thheller

hello, getting some errors while using shadow-cljs that I can't figure out. please have a look

component.cljs:127 Error rendering component (in app.hello.hello)
reagent$impl$component$do_render @ component.cljs:127
eval @ component.cljs:271
reagent$ratom$in_context @ ratom.cljs:44
reagent$ratom$deref_capture @ ratom.cljs:57
reagent$ratom$run_in_reaction @ ratom.cljs:539
reagent$impl$component$wrap_funs_$_render @ component.cljs:271
finishClassComponent @ react-dom.development.js:14742
updateClassComponent @ react-dom.development.js:14697
beginWork @ react-dom.development.js:15645
performUnitOfWork @ react-dom.development.js:19313
workLoop @ react-dom.development.js:19353
renderRoot @ react-dom.development.js:19436
performWorkOnRoot @ react-dom.development.js:20343
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:19
eval @ dom.cljs:48
eval @ dom.cljs:38
app$core$render @ core.cljs:9
app$core$main @ core.cljs:14
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:1840
Show 2 more frames
component.cljs:127 Error rendering component (in app.hello.hello)
reagent$impl$component$do_render @ component.cljs:127
eval @ component.cljs:271
reagent$ratom$in_context @ ratom.cljs:44
reagent$ratom$deref_capture @ ratom.cljs:57
reagent$ratom$run_in_reaction @ ratom.cljs:539
reagent$impl$component$wrap_funs_$_render @ component.cljs:271
finishClassComponent @ react-dom.development.js:14742
updateClassComponent @ react-dom.development.js:14697
beginWork @ react-dom.development.js:15645
performUnitOfWork @ react-dom.development.js:19313
workLoop @ react-dom.development.js:19353
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
replayUnitOfWork @ react-dom.development.js:18579
renderRoot @ react-dom.development.js:19469
performWorkOnRoot @ react-dom.development.js:20343
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:19
eval @ dom.cljs:48
eval @ dom.cljs:38
app$core$render @ core.cljs:9
app$core$main @ core.cljs:14
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:1840
Show 6 more frames
core.cljs:56 Uncaught Error: Assert failed: Component must not be nil
c
    at Object.reagent$core$adapt_react_class [as adapt_react_class] (core.cljs:56)
    at <http://cmp.app|cmp.app>$hello$hello [as reagentRender] (hello.cljs:15)
    at eval (component.cljs:86)
    at Object.reagent$impl$component$wrap_render [as wrap_render] (component.cljs:91)
    at Object.reagent$impl$component$do_render [as do_render] (component.cljs:121)
    at eval (component.cljs:271)
    at Object.reagent$ratom$in_context [as in_context] (ratom.cljs:44)
    at Object.reagent$ratom$deref_capture [as deref_capture] (ratom.cljs:57)
    at Object.reagent$ratom$run_in_reaction [as run_in_reaction] (ratom.cljs:539)
    at cmp.reagent$impl$component$wrap_funs_$_render [as render] (component.cljs:271)
reagent$core$adapt_react_class @ core.cljs:56
app$hello$hello @ hello.cljs:15
eval @ component.cljs:86
reagent$impl$component$wrap_render @ component.cljs:91
reagent$impl$component$do_render @ component.cljs:121
eval @ component.cljs:271
reagent$ratom$in_context @ ratom.cljs:44
reagent$ratom$deref_capture @ ratom.cljs:57
reagent$ratom$run_in_reaction @ ratom.cljs:539
reagent$impl$component$wrap_funs_$_render @ component.cljs:271
finishClassComponent @ react-dom.development.js:14742
updateClassComponent @ react-dom.development.js:14697
beginWork @ react-dom.development.js:15645
performUnitOfWork @ react-dom.development.js:19313
workLoop @ react-dom.development.js:19353
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
replayUnitOfWork @ react-dom.development.js:18579
renderRoot @ react-dom.development.js:19469
performWorkOnRoot @ react-dom.development.js:20343
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:19
eval @ dom.cljs:48
eval @ dom.cljs:38
app$core$render @ core.cljs:9
app$core$main @ core.cljs:14
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:1840
Show 10 more frames
react-dom.development.js:17118 The above error occurred in the &lt;app.hello.hello&gt; component:
    in app.hello.hello

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <https://fb.me/react-error-boundaries> to learn more about error boundaries.
logCapturedError @ react-dom.development.js:17118
logError @ react-dom.development.js:17154
expirationTime.callback @ react-dom.development.js:18066
commitUpdateEffects @ react-dom.development.js:16434
commitUpdateQueue @ react-dom.development.js:16464
commitAllLifeCycles @ react-dom.development.js:17384
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
commitRoot @ react-dom.development.js:18949
eval @ react-dom.development.js:20419
exports.unstable_runWithPriority @ scheduler.development.js:256
completeRoot @ react-dom.development.js:20418
performWorkOnRoot @ react-dom.development.js:20347
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:19
eval @ dom.cljs:48
eval @ dom.cljs:38
app$core$render @ core.cljs:9
app$core$main @ core.cljs:14
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:1840
Show 3 more frames
shadow.module.main.append.js:4 An error occurred when calling (app.core/main)
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:1840
main.js:1672 An error occurred when loading shadow.module.main.append.js
env.evalLoad @ main.js:1672
(anonymous) @ main.js:1840
main.js:1673 Error: Assert failed: Component must not be nil
c
    at Object.reagent$core$adapt_react_class [as adapt_react_class] (core.cljs:56)
    at <http://cmp.app|cmp.app>$hello$hello [as reagentRender] (hello.cljs:15)
    at eval (component.cljs:86)
    at Object.reagent$impl$component$wrap_render [as wrap_render] (component.cljs:91)
    at Object.reagent$impl$component$do_render [as do_render] (component.cljs:121)
    at eval (component.cljs:271)
    at Object.reagent$ratom$in_context [as in_context] (ratom.cljs:44)
    at Object.reagent$ratom$deref_capture [as deref_capture] (ratom.cljs:57)
    at Object.reagent$ratom$run_in_reaction [as run_in_reaction] (ratom.cljs:539)
    at cmp.reagent$impl$component$wrap_funs_$_render [as render] (component.cljs:271)

> Error: Assert failed: Component must not be nil

> An error occurred when calling (app.core/main)

these stand out to me

here's the all the code https://github.com/FrankApiyo/shadow-cljs-test

not certain were I have a nil component

This open cider issues reflects a lot of the pain I've been feeling today trying to get a shadow-cljs workflow arranged with a large clj|cljc|cljs project https://github.com/clojure-emacs/cider/issues/2946

I'm having to (still) do a bit of a dance with sesman-link-with-project and separate cider jack-ins for tool.deps backend and shadow front-end to get something work-able

(ns app.hello
  (:require [reagent.core :as r]
            ["react-data-grid" :refer [ReactDataGrid]]))

this is probably incorrect

yep! noticed that the issue is here

[(r/adapt-react-class  ReactDataGrid)
   {:columns [{:key 0 :name "test"}] :rows [{:id 1 :title "two"}]} ""]

try

(ns app.hello
  (:require [reagent.core :as r]
            ["react-data-grid" :default ReactDataGrid]))

see the translation table here https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages

the JS example has import ReactDataGrid from 'react-data-grid'; so the :default should be correct

Thanks. I'm using one alpha library that wraps react. How do I debug bad macros? I'm suspicious it may cause it. I want to get to the bottom of it, so it won't blow up in my face one day.

and you don't need the adapt-react-class

I would appreciate any pointers on what to look on.

wow, yea, that worked!

Just [:> ReactDataGrid {...}] should be ok

thank you so much

not a clue, would need to see actual code and actual build configs

I suspect that shadow-cljs should handle updates to the package.json & yarn.lock fine, right? For me it usually ends in a loop trying to compile over and over again, until I kill it, with this error:

[:admin] Compiling ...
[:admin] Build failure:
package in /webapp/cljs/admin/node_modules/nouislider specified entries but they were all missing
{:tag :shadow.build.npm/missing-entries, :entries ["distribute/nouislider.js"], :package-dir #object[java.io.File 0x669ecd61 "/webapp/cljs/admin/node_modules/nouislider"]}
ExceptionInfo: package in /webapp/cljs/admin/node_modules/nouislider specified entries but they were all missing
	shadow.build.npm/find-package-main (npm.clj:186)
	shadow.build.npm/find-package-main (npm.clj:159)
	shadow.build.npm/find-package-require* (npm.clj:200)
	shadow.build.npm/find-package-require* (npm.clj:194)

I run it inside of Docker, this might be an issue?

the error message is telling you that the package.json refered a file that does not exist

so it has something like "main":"./foo.js" or so but foo.js does not exist in the package (in your case distribute/nouislider.js)

don't know enough about what you are doing to comment further

Yeah, I imagine it's hard to debug from there. The files are there (in a volume), restarting shadow-cljs fixes it. I blame Docker for now

I'll try to come up with a minimal reproducible example and share it once I pinpoint what's causing it. Thank you for your prompt responses and for confirming that it's indeed a problem. And for shadow-cljs in general 🙂

I'm using shadow-cljs 2.12.5 on macOS 10.15.6 (Catalina) when running a watch process for a browser target I'm seeing builds go into an infinite loop: [:app] Build completed. (1341 files, 270 compiled, 0 warnings, 16.46s) [:app] Compiling ... [:app] Build completed. (1341 files, 270 compiled, 0 warnings, 15.65s) [:app] Compiling ... [:app] Build completed. (1341 files, 270 compiled, 0 warnings, 16.27s) [:app] Compiling ... [:app] Build completed. (1341 files, 270 compiled, 0 warnings, 16.69s) [:app] Compiling ... as soon as the compilation is complete it starts again, and the shadow jvm process spikes the CPU:

Has anyone else experienced this behavior? I could maybe try upgrading the OS version

i think i've seen this happen if the compiled output is on the classpath?

aka the output appears as input which triggers output which triggers ...

hmm, thanks for the suggestion. I'll look into that. It's odd though because there's a team of people working on this so I would have thought they'd see it also.