Fork me on GitHub
#shadow-cljs
<
2021-09-27
>
edbond06:09:25

I'm trying to use MUI (https://mui.com/getting-started/usage/) 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

edbond15:09:11

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

edbond15:09:52

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

Ben Halton18:09:01

:thumbsup::skin-tone-2:

pez08:09:44

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?

pez08:09:20

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.

pez08:09:22

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

pez10:09:14

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

pez11:09:23

Solution:

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

thheller17:09:09

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

pez18:09:24

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

pez06:09:44

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

thheller06:09:45

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

thheller06:09:02

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

thheller06:09:11

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

pez06:09:02

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

thheller06:09:55

relevant for what?

thheller06:09:15

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

thheller06:09:30

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

thheller06:09:49

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

thheller06:09:41

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

pez06:09:10

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!

thheller06:09:08

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

thheller06:09:20

any end product aka. project doesn't

pez07:09:53

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.

thheller07:09:15

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

pez09:09:41

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

pez09:09:58

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

pez09:09:30

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

{:deps {...
        b/b {:local/root "../projects/b"}
 ...}
b/deps.edn
{:paths ["src"]}
b/src/deps.cljs
{: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.)

pez10:09:43

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?

thheller17:09:12

> But a lot of other things do not happen

thheller17:09:23

what does that mean? what else is there?

thheller17:09:04

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

pez17:09:55

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.

pez17:09:14

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

thheller17:09:41

totally fine to start shadow-cljs that way

thheller17:09:10

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

thheller17:09:13

pure deps.edn is fine

pez17:09:28

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

pez17:09:28

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

thheller17:09:37

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.

thheller17:09:51

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

thheller17:09:29

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

thheller17:09:38

what else cider does no clue

pip15:09:05

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

kennytilton13:09:41

"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

thheller17:09:30

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

pip17:09:32

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

thheller17:09:44

that still doesn't tell me anything about your setup

thheller17:09:10

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:

:test
  {: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

https://shadow-cljs.github.io/docs/UsersGuide.html#_the_build 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

thheller05:09:43

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

tianshu21:09:16

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 []
  (go
    (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))])))

thheller05:09:12

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

thheller05:09:27

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

tianshu14:09:16

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

tianshu21:09:44

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

tianshu21:09:05

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