Fork me on GitHub
#shadow-cljs
<
2021-05-07
>
sergey.shvets00:05:50

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.

Aron04:05:53

how do you restart shadow-cljs

sergey.shvets05:05:16

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.

Aron05:05:42

and then try running it again with watch?

Aron05:05:42

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.

thheller07:05:44

@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.

sergey.shvets15:05:16

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.

sergey.shvets15:05:23

I would appreciate any pointers on what to look on.

thheller15:05:59

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

sergey.shvets16:05:20

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 🙂

codeasone11:05:32

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.
would welcome some advice on how to proceed. This is with CIDER 1.1.0 (package: 20210422.802) (Plovdiv)

codeasone11:05:24

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

:missing-nrepl-middlewareuser>
Confused

codeasone11:05:47

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")))
in my .dir-locals I just land on the same issue:
;; 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.

codeasone11:05:25

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) 😢

codeasone11:05:16

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")
to my dir-locals.el and then just cider-jack-in-clj&cljs - should/could it be that simple?

thheller12:05:27

@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

codeasone13:05:57

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")))
and:
;; 
(defn cljs-repl
  ([]
   (cljs-repl :app))
  ([build-id]
   (server/start!)
   (shadow/watch build-id)
in user.clj I'm seeing the following on cider-jack-in-clj&cljs and I can force (re)compiles with

codeasone13:05:46

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

codeasone13:05:00

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

thheller13:05:59

@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.

thheller13:05:43

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

thheller13:05:20

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

thheller13:05:38

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

codeasone13:05:02

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

codeasone13:05:38

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

thheller13:05:04

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

codeasone13:05:01

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 🎉

codeasone13:05:32

thanks for your patience and consideration @thheller

Franklin14:05:12

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

Franklin14:05:18

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 $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 <app.hello.hello> component:
    in app.hello.hello

Consider adding an error boundary to your tree to customize error handling behavior.
Visit  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 $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)

dpsutton14:05:30

> Error: Assert failed: Component must not be nil

dpsutton14:05:05

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

dpsutton14:05:09

these stand out to me

Franklin14:05:24

not certain were I have a nil component

thheller15:05:32

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

thheller15:05:36

this is probably incorrect

Franklin15:05:48

yep! noticed that the issue is here

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

thheller15:05:53

try

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

thheller15:05:55

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

2
thheller15:05:20

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

Franklin15:05:32

wow, yea, that worked!

thheller15:05:34

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

2
Franklin15:05:33

thank you so much

codeasone15:05:45

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

codeasone15:05:49

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

iGEL15:05:33

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 guess I've updated nouislider here. I also started to delete the .shadow-cljs dir to make sure everything is fresh

iGEL15:05:57

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

thheller15:05:09

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

thheller15:05:27

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)

thheller15:05:23

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

iGEL15:05:49

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

dvingo21:05:28

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:

dvingo21:05:10

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

dpsutton21:05:12

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

dpsutton21:05:35

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

dvingo21:05:46

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.