Fork me on GitHub

hello 馃憢 Do you think this error is caused by shadow-cljs or reagent?

react_devtools_backend.js:2850 Warning: Invalid attribute name: `cljs$lang$protocol_mask$partition0$`
    at div
    at eval ()
    at exports.CustomGallery ()
    at f ()
    at div
    at div
    at cmp ()
    at div
    at div
    at div
    at div
    at cmp ()


the code

   [reagent.core :as reagent]
   ["react-photoswipe-gallery" :refer (Gallery Item)]))

(defn photos-component
  [ {:style {:display "block", :overflow-x "scroll"}}
    [:f> Gallery
    ;;  {:id "simple-gallery"}
       {:display "grid"
        :gridTemplateColumns "240px 171px 171px"
        :gridTemplateRows "114px 114px"
        :gridGap 12}}
      [:f> Item
       {:id "so-first"
        :title "Author: Folkert Gorter"
        :height "1600"
        :width "1600"
       (fn [ref open]
           {:src ""
            :ref ref
            :on-click open
            :style {:cursor "pointer"
                    :objectFit "cover"
                    :width "100%"
                    :maxHeight "100%"}}]))]]]]])


got an answer for this in #reagent


@thheller Congrats on the CT funding for Q3!

馃帀 14
馃殌 6

clojure -A:build:test -M -m shadow.cljs.devtools.cli watch app
@thheller this call seems to work but the issue also seems like potentially a different version issue in the CI env where it鈥檚 failing


the -M might be a problem if your CI has an older tools.deps install?


Yeah, I鈥檒l check on that!


Can someone remind me how I can wipe state of the node-repl without restarting everything? There鈥檚 a way to restart the worker process for that but I can鈥檛 remember 馃槄


there is an open issue about netlify still using an old version


(shadow.cljs.devtools.api/stop-worker :node-repl) from the CLJ repl

David Pham17:09:58

I had an issue today which was really odd: I was using this library for two components: . I was compiling with shadow-cljs in advacned mode several time a day without an issue, and then suddenly without changing the old code, the components started to crash. I know the problem is with emotion styled componenet as I debugged with the --debug flag.

David Pham17:09:16

I tried to write externs, but my skillset is probably quite limited.

David Pham17:09:22

Does anyone know what could be the issue?

David Pham17:09:52

I will try to set up a minimal example tomorrow if no one has an idea.


> the components started to crash


what does that mean? what is the actual error?

David Pham17:09:56

I believe "@emotion/styled" is undefined

David Pham17:09:58

in advacned mode

David Pham17:09:25

The error says "call" from is undefined

David Pham17:09:44

where t is emotion/styled.


can't say without seeing code. there is no difference in how JS code is provided in :advanced since those parts only ever use :simple

David Pham17:09:30 is not a function sorry

David Pham17:09:22

$emotion$core$create_styled$$ = function($display_name$jscomp$2_result$jscomp$144$$, $component$jscomp$30$$, $options$jscomp$119$$, $styles$$) {
        var $wrap$jscomp$2$$ = $APP.$cljs$core$get$$.$cljs$core$IFn$_invoke$arity$2$($options$jscomp$119$$, "wrap")
          , $camel_casing_props_QMARK_$$ = $APP.$cljs$core$get$$.$cljs$core$IFn$_invoke$arity$3$($options$jscomp$119$$, "camelCasingProps?", !0)
          , $class_name_prop$jscomp$1$$ = $APP.$cljs$core$name$$($APP.$cljs$core$get$$.$cljs$core$IFn$_invoke$arity$3$($options$jscomp$119$$, "classNameProp", "class-name"))
          , $wrapper_component$$ = $APP.$cljs$core$not$$($camel_casing_props_QMARK_$$) ? $component$jscomp$30$$ : null != $component$jscomp$30$$.__emotion_base ? $component$jscomp$30$$ : $APP.$cljs$core$_EQ_$$.$cljs$core$IFn$_invoke$arity$2$($APP.$cljs$core$type$$($component$jscomp$30$$), String) ? $emotion$core$create_forwarded_element$cljs$0core$0IFn$0_invoke$0arity$02$$($component$jscomp$30$$, $emotion$core$object__GT_camel_props$$) : $APP.$cljs$core$_EQ_$$.$cljs$core$IFn$_invoke$arity$2$($class_name_prop$jscomp$1$$, "className") ? $component$jscomp$30$$ : $emotion$core$create_forwarded_element$cljs$0core$0IFn$0_invoke$0arity$02$$($component$jscomp$30$$, function($p1__141952_SHARP_$$) {
            return $emotion$core$convert_class_name$$.$cljs$core$IFn$_invoke$arity$2$($p1__141952_SHARP_$$, $class_name_prop$jscomp$1$$);
        $wrapper_component$$.displayName = $display_name$jscomp$2_result$jscomp$144$$;
        $display_name$jscomp$2_result$jscomp$144$$ = function() {
            function $G__141956$$($props$jscomp$26$$) {
                return $APP.$cljs_bean$core$__GT_js$$($styles$$).concat($props$jscomp$26$$.css);
            var $fexpr__141955$$ = function() {
                var $G__141958$$ = $APP.$cljs_bean$core$__GT_js$$($options$jscomp$119$$);
                return $emotion$core$styled_component$$.$cljs$core$IFn$_invoke$arity$2$ ? $emotion$core$styled_component$$.$cljs$core$IFn$_invoke$arity$2$($wrapper_component$$, $G__141958$$) : $emotion$core$styled_component$$.call(null, $wrapper_component$$, $G__141958$$);
            return $fexpr__141955$$.$cljs$core$IFn$_invoke$arity$1$ ? $fexpr__141955$$.$cljs$core$IFn$_invoke$arity$1$($G__141956$$) : $fexpr__141955$$.call(null, $G__141956$$);
        return $APP.$cljs$core$truth_$$($wrap$jscomp$2$$) ? $wrap$jscomp$2$$.$cljs$core$IFn$_invoke$arity$1$ ? $wrap$jscomp$2$$.$cljs$core$IFn$_invoke$arity$1$($display_name$jscomp$2_result$jscomp$144$$) : $wrap$jscomp$2$$.call(null, $display_name$jscomp$2_result$jscomp$144$$) : $display_name$jscomp$2_result$jscomp$144$$;

David Pham17:09:42

That would be the function that breaks doown on advanced compliation

David Pham17:09:51

in particular the expression

David Pham17:09:06

return $fexpr__141955$$.$cljs$core$IFn$_invoke$arity$1$ ? $fexpr__141955$$.$cljs$core$IFn$_invoke$arity$1$($G__141956$$) : $fexpr__141955$$.call(null, $G__141956$$);

David Pham17:09:27

Is undefined

David Pham17:09:01

What I find odd is the component runs fine on debug mode, but not on advanced, and I don't know how I could solve this.


can you show that in the --debug output? should be the assignment of $emotion$core$styled_component$$

David Pham18:09:26

$emotion$core$styled_component$$ = $module$node_modules$$emotion$styled$dist$emotion_styled_browser_cjs$$.default


do you have all the correct npm package versions?


maybe you have a newer/older one that doesn't have a default export?

David Pham18:09:27

I took the latest version of both

David Pham18:09:11

It is is really odd, because It was working this morning, I did not change anything, and then suddenly it stopped working.

David Pham18:09:29

But I will try to make a minimal example tomorrow.


had to change something. doesn't mysteriously change itself.

David Pham18:09:56

I compile two versions


can be a simple thing as running npm install and creating a dependency conflict that wasn't there before

David Pham18:09:13

separated by a few seconds

David Pham18:09:22

and one of the output works and not the other xD

David Pham18:09:29

oh well. Let's see.


I鈥檝e got a namespace that defines transit types for some defrecords and I need these types to be redefined on code reload. So I added the marker to always reload this NS

(ns ^:dev/always mutesync.background.transit-types
  (:require ...))
But this namespace is still not be reloaded when I update one of it鈥檚 children. Does :dev/always mean always reload this NS or something else?


It does mean always reload or even recompile. meaning every recompile cycle will recompile and then reload it. you should see it in the browser console


note that reloading defrecords will invalidate all active instances so that might present a problem?


or not invalidate, just new types so not compatible with the previous ones if you ever to (instance? TheRecord ...)


ah you鈥檙e right it does, but my code is throwing an exception before reloading this namespace is possible, because defrecords are incompatible


I鈥檓 wondering if I should just move away from defrecords for this reason


protocols are nice, but i鈥檇 rather have dev code reload be reliable


I typically move the protocols to a namespace that is pretty much never reloaded


like a dedicated .protocols ns or so


of course that only solves part of the problem. custom types aren't really hot-reload/REPL friendly too much


so you define and implement your protocols in a separate namespace?


this is one of the reasons my friend @wilkerlucio says we should use maps with lambdas rather than defrecords


what other issues are you aware of with custom types and hot-reload?


yeah, ns just for protocols. no implementations


oh i see, it鈥檚 the protocol eval causing issues that you鈥檙e talking about


don't know what error you actually get but it does solve some issues yes


my issues is i end up re-defining the defrecord and then i can no longer serialize it as transit without re-defining the transit writer


thank you for the help


yeah anything thats type based is an issue


Does shadow-cljs respect :refer-clojure :exclude?

(ns user
  (:refer-clojure :exclude [compile])

(defn compile [] 42)
$ npx shadow-cljs watch :main
shadow-cljs - config: .../shadow-cljs.edn
shadow-cljs - starting via "clojure"
WARNING: compile already refers to: #'clojure.core/compile in namespace: user, being replaced by: #'user/compile


=== Version
jar:            2.15.5
cli:            2.15.5
deps:           1.3.2
config-version: 2.15.5


@zhuxun2 have you tested this without shadow?


@borkdude Hmmm, clj -M --main cljs.main --compile user gives the same error, so it's not shadow-cljs


it seems to be clojure behavior


not sure why, but perhaps bring it up in #clojure

Fredrik Andersson20:09:07 I'm trying to use this to compile my tailwindcss. However the hooks cannot find the babashka class path. I'm not entirely sure how to add dependencies to be used by clj hooks. I did try to find it in the documentation without success.


@fredrik245 babashka.process is a library which you can probably add to deps.edn?

Fredrik Andersson20:09:09

ok, im using shadow-cljs

Fredrik Andersson20:09:19

should I add a deps-file too?

Fredrik Andersson20:09:39

sorry I'm quite new to clojure and clojurescript


That link writes about postcss.clj which is a Clojure (JVM) file


You could add a deps.edn like this:

{:deps {babashka/process {:mvn/version "0.0.2"}}}
and in your shadow-cljs.edn write :deps true so it picks up on the deps.edn


You will also need the clojure CLI installed, see


if you are using project.clj then just add the dep there


I think shadow also allows you to declare the deps inside its configuration


so any of those three options should work and align with what you are already doing

Fredrik Andersson20:09:52

i thought that i linked to a particular reply in the link. I successfully added the dependency in shadow-cljs.edn

Fredrik Andersson20:09:46

however it doesn't seem to write any output files. so i'm going to look closer at that


I recommend using the :inherit true option in process


then you will see the output from those commands while they are running


and that may give some hints as to what's going wrong

Fredrik Andersson20:09:40

hm, still nothing 馃槥


@fredrik245 Could you post your code to a gist or some public repo?

Fredrik Andersson21:09:33

@borkdude I'm going to bed now. I'll do it tomorrow if I can't find a solution in the morning.


you can at least insert some printlns for debugging if those build functions are executed at all. ok goodnight!

Fredrik Andersson21:09:07

yes I did try that but they didn't execute


ah ok, then perhaps the shadow config isn't properly set up or so

Fredrik Andersson21:09:42

yes probably, ill look into it tomorrow with a fresh head 馃槃

Fredrik Andersson21:09:49

thanks for the help