Fork me on GitHub
#shadow-cljs
<
2024-06-03
>
dommas05:06:44

Does setting :js-provider :external break local js-files imports via shadow-cljs directly, e.g. following https://shadow-cljs.github.io/docs/UsersGuide.html#_javascript_dialects? I’m currently trying to use local .jsx, .tsx, … components + provide external npm-dependencies via webpack to avoid issues with the closure compiler caused by new webpack-syntax in some packages (in my case tanstack-query v5). Here is a small demo-repo: https://github.com/dummaso/cljs-jsx-demo Everything seems to work, as long as no local js-files are imported. As soon as e.g. ["/components/jsx-demo" :refer [JsxDemo]] is required in core.cljs, errors pop up in the browser console such as TypeError: Cannot read properties of undefined (reading 'module$components$jsx_demo') Before setting :js-provider to :external, they worked without an issue. Any pointers/ideas how I could solve this are highly appreciated 😁

thheller05:06:57

I'd very strongly recommend to not use those kinds of imports if you are using webpack anyway

thheller05:06:37

even without webpack I don't recommend it. people that do this very frequently run into externs issues

dommas06:06:28

Thank you for your fast reply! Oh ok, didn’t know that 😄 So far I’ve been mostly using that approach. Trying to come up with a different approach now, still a bit of a webpack-newbie 😄

thheller06:06:40

this should still work though. can you please first try bumping shadow-cljs to the latest? there was an issue like this fixed not too long ago

dommas06:06:07

Ok, I’m at it

dommas06:06:22

Bumped shadow-cljs, unfortunately doesn’t seem to solve the error

dommas06:06:01

Ok, but the webpack-driven approach seemed to have worked

thheller06:06:46

busy currently. I'll take a look later

dommas07:06:16

Ok, thank you so much! I pushed the working version using webpack onto a separate branch, so you reproduce the error from the main branch if you want to have a look at it :)

thheller09:06:30

setup looks good. only downside is when your JS components need to access CLJS code it may get a bit complicated, as long as CLJS only accesses the JS code this setup is purely better

dommas10:06:17

Ok, thank you for pointing me to the better solution! The idea is mainly to be able to consume “dumb” jsx/tsx ui-components and have all interesting logic in cljs, so it should hopefully suffice 😆

mll14:06:55

Hi! I wanted to configure shadow to run tests and automatically re-run them once any tests/code change (functionality similar to lein test-refresh). I am running the commands (in separate windows):

shadow-cljs watch test
karma start
But it doesnt seem to work. My shadow file is this:
{:nrepl
 {:port 8777}

 :build-defaults
 {:build-hooks [(shadow-git-inject.core/hook)]}

 :dev-http
 {8280 "resources/public"}

 :lein {:profile "+cljs"}
 :builds
 {:test {:target     :karma
         :output-to  "resources/public/js/test.js"
         :ns-regexp  "spinney.test"
         :autorun    true}
  :chatbot
  {:target     :browser
   :output-dir "resources/public/js"
   :modules
   {:chatbot
    {:init-fn spinney.chatbot.core/main}}
   :dev
   {:compiler-options
    {:closure-defines
     {re-frame.trace.trace-enabled?        true
      day8.re-frame.tracing.trace-enabled? true}}}
   :devtools
   {:preloads [day8.re-frame-10x.preload.react-18]
    :watch-dir "resources/public"}
   :release
   {:build-options
    {:ns-aliases
     {day8.re-frame.tracing day8.re-frame.tracing-stubs}}}}}}

thheller15:06:34

:autorun true is only an option for :node-test, it has no effect for :karma. karma itself has a watch mode I believe

mll16:06:50

Thanks! I've checked karma and it successfully reloads tests whenever the file (test.js) changes. The problem is, shadow-cljs does not pick up my changes and does not rebuild this file...

mll16:06:47

it was my setup, somehow the shadow process got killed in my scripts