shadow-cljs

Schmoho 2025-03-17T23:19:41.707129Z

I just set up a repro for something I observed with vega-lite.js, namely that shadow is unable to build it into a browser target. I would like to understand why that happens. npx shadow-cljs watch app

Failed to inspect file
  /.../repro/node_modules/vega-lite/build/vega-lite.js

Errors encountered while trying to parse file
  /home/rick/Software/repro/node_modules/vega-lite/build/vega-lite.js
  {:line 16106, :column 4, :message "'}' expected"}
The position in code of vega-lite.js
class Optimizer {
    #modified; // <-- this is line 16106
    constructor() {
      this.#modified = false;
    }
Google tells me those are ES2022 private class fields. I can find no mention of either in the shadow docs, the "most recent" option seems to be :es2020. So is this just a modern JS feature that the compiler can't handle? I have been using vega-lite in a project so far with no problems where the build target is :esm, which I ended up doing because it was the only way to integrate an external dependency, which I only got to work with the specific bundler used by the developers. This completely fried the REPL workflow (Vite that is, which apparently requires some extended rain dance to do hot module reloading), which I have decided is unacceptable. So I am trying to get back to a no-external bundler setup. I am kind of confused about when to use what kind of build target and what the respective implications are. For context: package.json
"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-vega": "^7.6.0"
  }
shadow-cljs.edn
:dependencies
 [[reagent "1.1.1"]]

 :builds
 {:app {:target :browser
        :modules {:main {:entries [core]
                         :init-fn core/init}}}}}
core.cljs
(ns core
  (:require
   ["react-dom/client" :refer [createRoot]]
   [reagent.core :as r]
   ["react-vega" :refer [VegaLite]])) ;; not even using this

(defonce root
  (createRoot (.getElementById js/document "app")))

(defn mount-root
  []
  (.render root (r/as-element [:div "hi"])))

(defn init [] (mount-root)) 

thheller 2025-03-18T05:40:16.597619Z

this is a very common issue and accounts for like 90% all of recently reported issues. Unfortunately the closure compiler does not support this syntax as of now, so when using packages like that you'll need to fall back to :js-provider :external or :import and run things through a second build tool such as webpack. see https://github.com/google/closure-compiler/issues/2731

thheller 2025-03-18T05:43:25.277629Z

they are working on it though and I hope the fix is out soon

❤️ 3
thheller 2025-03-18T11:22:26.313939Z

oh wow. just saw there was a v20250316 release. maybe it is fixed in that version. will try soon.