Fork me on GitHub

I'm trying to use MUI ( and reagent and getting error in browser console: shadow-cljs - failed to load – "module$node_modules$$mui$material$node$ButtonBase$TouchRipple"

Ben Halton09:09:03

have you tried setting your compiler options in shadow-cljs.edn to :compiler-options {:output-feature-set :es5}

👍 1
Ben Halton09:09:21

this sorted it for me


@U2BU6P81K Thank you Ben! Now I have a different errors. Will try to solve them 🙂


Solved. The require was wrong, correct is ["@mui/material/Button" :default Button] . Thanks again!

Ben Halton18:09:01



Is there a way I can configure deps.edn :main-opts such that it both calls a clj function in my project and start Shadow watching?


Context: I am porting a rather fresh Luminus project from Leiningen to tools/deps. With the leiningen project this in at the top level of project.clj, started my apps web server, and shadow still started watching:

:main ^:skip-aot sandbox.flag-yard.core
I’m failing to replicate this behaviour using deps.edn.


Wait, now I think I managed to do it. I put the :main-opts at the root level…


If I have a shadow-cljs project, A, that depends on another shadow-cljs project, B. Configured in Project A:s deps.edn like so:

:deps {b/b {:local/root "<path-to-b>"}
Where B has an npm dependency on something-something. How can I make shadow-cljs in project A look in project B for the dependency? Right now shadow complaints:
The required JS dependency "something-something" is not available, it was required by "B/some_file.cljs".



:js-options {:js-package-dirs ["node_modules" "<path-to-b>/node_modules"]}


not the solution. your b should have a deps.cljs declaring :npm-deps


Thanks, I'll change. (Though my ”solution” works 😀)


Will shadow download the dependency? Or should it go both in package.json and :npm-deps?


deps.cljs is the mechanism to have shadow-cljs automatically install missing packages


shadow-cljs never looks at the package.json of your project otherwise and absolutely never of your CLJS dependencies


so to get your dependencies from B to A you need a deps.cljs with :npm-deps. nothing else is relevant for that


Is this actually relevant regardless if I have an interproject dependency?


relevant for what?


I'm assuming here that your that b/b has a npm dependency that your main project does not have


so to get it from b/b to your main project you need deps.cljs


OR use :js-package-dirs but that has other issues


your main project does not need a deps.cljs and should manage its dependencies directly via package.json


Yes, I mean if I have a project that is not dependent on some other shadow-cljs project. Just project A, if you like. Should project A declare its npm deps in shadow-cljs.end rather than … ah, now you beat me to it. Thanks!


please differentiate between project and library. any library, aka. used in other places must declare via deps.cljs


any end product aka. project doesn't


Thanks for the clarifications! I think it is a bit extra messy in the codebase I’m dealing with right now, where some projects are used as libraries to other projects. We’re about to clean that up, and my project B in the thread start is a new library I’m building so I’m using :npm-deps there now.


well yeah any library can be a project too. I just mean that when you use something as a library you need deps.cljs


So, removing the :js-package-dirs from project A, and having this in b/deps.edn:

{:paths ["src"]
 :npm-deps {"something-something" "X.X.X"}}
Also removing package.json and node_modules from B. Then restart shadow, reload the app and try to evaluate a namespace that requires "something-something". I get that error back:
The required JS dependency "something-something" is not available, it was required by "B/some_file.cljs".
Either i have misconfigured something, or misunderstood something (or both).


Ah, sorry. misconfigurations indeed. I should of course declare those in shadow’s config.. facepalm


No, I still can’t get it to work. I now have: a/deps.edn

{:deps {...
        b/b {:local/root "../projects/b"}
{:paths ["src"]}
{:npm-deps {"something-something" "X.X.X"}}
Still getting that error message when connecting to a’s REPL and loading a file that requires in the thing on b that needs the npm thing. Does shadow want something more? (There’s no shadow-cljs.edn in b, for example.)


Hmmm, it seems to have to do with how project A is wired. It is not started using the shadow-cljs command, but like so:

:main-opts ["-m" "shadow.cljs.devtools.cli" "watch" "foo"]
When I started it using shadow-cljs the download of the npm thing happened. But a lot of other things do not happen, so I can’t really go this way. Is :js-package-dir what I should turn to anyway, you think?


> But a lot of other things do not happen


what does that mean? what else is there?


using :js-package-dirs is totally fine, just more prone to potential dependenciy version conflicts


Oh, (about the things that do not happen) just that the project so far depends on being started the way it is, so I can't really switch it to start using shadow directly.


I might make another try with using npm-deps proper. There were a few variables I didn't keep fixed during my latest testing.


totally fine to start shadow-cljs that way


the shadow-cljs npm command is just for convenience, it provides no other actual functionality


pure deps.edn is fine


I should be able to make it work, I take it.


Does npm-deps make shadow-cljs update project A's package-json?


yes, well shadow-cljs runs npm install for those packages and that in turn modifies your package.json. shadow-cljs itself does not modify it directly

Drew Verlee15:09:08

My goal is to get a running repl on this project and so i added shadow-cljs 1. add shadow-cljs.edn

{:deps true
 :dev-http {8000 "public"}
 :builds {:app {:target :browser
                :output-dr "public/js"
                :asset-path "js"
                :modules {:main {:entries [re-frame-routing.core]}}}}}
and commented out clojurescrript in the deps (otherwise it through an error, but i'm not sure why). 2. added a public/index.html file 3. ran cider-jack-in-cljs shadow > :app (build) > start browser this starts a repl, but it doesn't seem to send expressions to it.

Drew Verlee15:09:51

i probably need to watch the shadow files and run the compiled js files.

Drew Verlee15:09:44

never mind, i seem to want to use the browser-repl.


yeah browser-repl or node-repl depending on what you need


but app build should be fine too. no clue what commands cider-jack-in-cljs runs so I can only say that you do need a running watch fore the REPL to work


what else cider does no clue


hello! i want to configure shadowcljs to use a webpack plugin to convert sass to less but i also currently have the lein-sass plugin installed. any thoughts on how these interact? sorry if this is a nooby question, just trying to understand how they would work together


"i want to configure shadowcljs to use a webpack plugin to convert sass to less but i also currently have the lein-sass plugin installed." Software development in the twenty-first century! 🤯 Anyone old enough to remember when we just wrote code, compiled, linked, and ran? sigh


@lpanda2014 shadow-cljs does not use webpack by default so there is no place to configure webpack plugins. what kind of setup do you have?


we are using babel and want to use antd but don’t want to use less — we have lein-sassc from using the luminus template


that still doesn't tell me anything about your setup


what is your shadow-cljs build config?

Joe Douglas19:09:05

Hello, I'm writing some cljs tests targeting node and would like to have the tests run when I make changes to my files. I've tried the following:

  {:target :node-test
   :output-to "target/node-test"
   :autorun true}
And then running shadow-cljs watch test , the build completes, but it doesn't seem to run the tests. Any tips?

Ryan Jerue20:09:00 specifically see the karma.conf.js and the attached screenshot

Joe Douglas20:09:43

Thanks for the reply! I'm not familiar with Karma, but it looks like a lot of setup for what I'm looking to do. I just want to speed up my local development loop running pure node.js tests, no browsers involved or anything.

Ryan Jerue20:09:06

In that case:

node out/node-tests.js

Ryan Jerue20:09:04

node-test should do that, sorry on the karma brainfart haha


@USRHVLXTQ it should run the tests but :output-to is supposed to be a file not a directory. so its missing the .js at least. it might fail to run because of that maybe?

Joe Douglas08:10:38

Ah ok, I'll check that out, thanks a million to you both for the assist!


Looks like shadow-cljs can't infer target type with clojure.core.async.interop/<p!` and (.foo bar) . This will happen in code like this:

(defn run []
    (let [conn (Connection. host)
          market (<p! (.load Market conn market-addr #js {} serum-program-addr))
          bids (<p! (.loadBids market conn))
          asks (<p! (.loadAsks market conn))])))


not much I can do in shadow-cljs. core.async go loses all typehint info so the cljs.compiler cannot infer anything. I'd suggest keeping interop code out go loops entirely. can be a little bit annoying but (defn load-bids [^js market conn] (.loaderBids market conn)) and then just (<p! (load-bids market conn)) will not have any typehint issues


or just don't use go in the first place 😛


thank you, currently I'm using your suggestion, it works well.


Type hint won't work in this case, no matter wherever I add it.


The problem looks like I can't say what <p! returns is a javascript object by adding type hint.