The required namespace "highlight.js" is not available despite being listed in re-highlight's deps.cljs

[hoxu]

Our deps.edn depends on day8.re-frame/re-frame-10x, which in turn depends on superstructor/re-highlight:

https://github.com/day8/re-frame-10x/blob/e7105ccc00b8458cdb2e5696eecc4b8602b53bca/project.clj#L14-L17

re-highlight has deps.cljs that has highlight.js in :npm-deps:

https://github.com/superstructor/re-highlight/blob/41972d93cc412b4e99e1244c10de66c6404e520e/src/deps.cljs

Despite this, I get the following error from shadow-cljs:

[:app] Build failure:
The required namespace "highlight.js" is not available, it was required by "re_highlight/core.cljs".

My understanding after reading Declaring JS dependencies is that shadow-cljs should be able to find highlight.js because of the deps.cljs.

Am I misunderstanding something?

shadow-cljs 2.14.5

[thheller]

Not enough information. What does your build config look like? What is your package.json?

Do you maybe already have highlight.js in your package.json dependencies but did not run npm install to actually install it? shadow-cljs expects to find the files in node_modules/highlight.js by default. Does that exist?

[hoxu]

shadow-cljs.edn:

{:deps   {:aliases [:dev :test :shadow-cljs :sass :build]}

 :nrepl  false

 :socket-repl false

 :builds {:app  {:target     :browser
                 :output-dir "target/shadow-cljs/public/js"
                 :asset-path "/assets/js"
                 :js-options {:entry-keys ["browser" "main" "module"]}

                 :modules    {:app {:entries [app.core]}}

                 :dev        {:closure-defines {"re_frame.trace.trace_enabled_QMARK_"        true
                                                "day8.re_frame.tracing.trace_enabled_QMARK_" true}}

                 :devtools   {:after-load   app.core/mount-root
                              :watch-dir    "resources/public"
                              :watch-path   "/assets"
                              :preloads     [day8.re-frame-10x.preload]
                              :devtools-url "http://localhost:9630"
                              :loader-mode  :eval}

                 :release    {:closure-defines  {goog.DEBUG false}
                              :output-dir       "resources/public/js"
                              :compiler-options {:elide-asserts true
                                                 :externs       ["externs/externs.js"]}}}

          :demo {:target  :browser
                 :modules {:app {:entries [app.core]}}
                 :release {:closure-defines  {goog.DEBUG                       false}
                           :output-dir       "resources/public/js"
                           :compiler-options {:elide-asserts true
                                              :externs       ["externs/externs.js"]}}}

          :test {:target    :node-test
                 :output-to "target/test/node.js"
                 :autorun   true}

          :ci   {:target    :karma
                 :ns-regexp "-spec$"
                 :output-to "target/test/ci.js"}}}

clj -A:... -Stree snippet:

thheller/shadow-cljs 2.14.6
<clip>
day8.re-frame/re-frame-10x 1.1.8
  X binaryage/devtools 1.0.3 :use-top
  . com.yahoo.platform.yui/yuicompressor 2.4.8
  . zprint/zprint 1.0.1
    . rewrite-cljs/rewrite-cljs 0.4.5
      X org.clojure/tools.reader 1.3.2 :older-version
    . borkdude/edamame 0.0.11-alpha.12
      X org.clojure/tools.reader 1.3.2 :older-version
    . rewrite-clj/rewrite-clj 0.6.1
      X org.clojure/tools.reader 1.2.2 :older-version
  . superstructor/re-highlight 1.0.0

re-highlight 1.0.0 deps.cljs contains highlight.js:

https://github.com/superstructor/re-highlight/blob/v1.0.0/src/deps.cljs

[hoxu]

package.json dependencies part:

  "devDependencies": {
    "karma": "^6.1.1",
    "karma-chrome-launcher": "^3.1.0",
    "karma-cljs-test": "^0.1.0",
    "karma-junit-reporter": "^2.0.1",
    "shadow-cljs": "^2.11.1",
    "ws": "^7.3.1"
  },
  "dependencies": {
    "@tippyjs/react": "^4.1.0",
    "create-react-class": "^15.6.3",
    "date-fns": "^2.16.1",
    "font-awesome": "^4.7.0",
    "react": "^17.0.2",
    "react-datepicker": "^4.1.1",
    "react-dom": "^17.0.2",
    "react-select": "^4.1.0",
    "tippy.js": "^6.2.6"
  }

$ npm list
app@1.0.0 /path/to/app
├── @tippyjs/react@4.2.5
├── create-react-class@15.7.0
├── date-fns@2.22.1
├── font-awesome@4.7.0
├── karma-chrome-launcher@3.1.0
├── karma-cljs-test@0.1.0
├── karma-junit-reporter@2.0.1
├── karma@6.3.4
├── react-datepicker@4.1.1
├── react-dom@17.0.2
├── react-select@4.3.1
├── react@17.0.2
├── shadow-cljs@2.14.6
├── tippy.js@6.3.1
└── ws@7.5.1

[hoxu]

@thheller any ideas what I could have missed?

[thheller]

I really can't debug this remotely for you much. It all looks fine. Is there any indicator in the log when you start shadow-cljs? It should be attempting to install those dependencies directly on startup.

Otherwise just npm install highlight.js manually or setup a reproducible repo.

[hoxu]

Okay, thanks for the confirmation that nothing obvious is amiss in the configuration! I'll see if I can find time to dig deeper into this.

[rnadler]

Possible solution: https://bobonmedicaldevicesoftware.com/blog/2022/10/02/dealing-with-clojurescript-cross-build-npm-dependencies/

[thheller]

There must be a better way to do this. I just couldn’t find it…

Indeed there is. When not using shadow-cljs you may either use :target :bundle or CLJSJS packages. :target :bundle is sort of the official path of dealing with npm packages in regular CLJS (including figwheel). It'll just pick up the requires properly directly from the sources. You linked the proper articles for that.

The alternate (older, sort of deprecated variant) is using CLJSJS packages. For this you need to add the cljsjs/highlight dependency to your project. I'm not sure if it build properly by just doing that. If not you the package may not have been updated yet. If you get a complaint about missing namespaces let me know, I can give you the proper deps.cljs. Which you could then add to your project or you could maybe get the cljsjs/highlight package fixed.

[thheller]

Your post is also in no way related to the problem described here.