The required namespace "devcards-marked" is not available, it was required by "devcards/util/markdown.cljs".

[filipesilva]

Hi there 👋

I was trying to use [devcards "0.2.7"] with Shadow-CLJS and see this error:

[:cards] Build failure:
The required namespace "devcards-marked" is not available, it was required by "devcards/util/markdown.cljs".

Not super sure how to get around it, any guidance would be helpful!

[thheller]

shadow-cljs does not support :foreign-libs and I don't think it is a good idea for figwheel to bundle its own version of those dependencies.

In shadow-cljs you can fix this by redirecting the requires back to the original npm package names.

In your build config

:js-options {:resolve {"devcards-marked" {:target :npm :require "marked"}}}

@bhauman not sure why you moved away from using the regular CLJSJS deps?

[filipesilva]

I can confirm that adding devcards-marked and devcards-syntax-highlighter as custom resolves in my shadow-cljs.edn worked:

{:builds
  :cards {:asset-path "/js"
          :modules {:main {:init-fn app.cards/main}}
          :compiler-options {:devcards true}
          :output-dir "public/js"
          :js-options {:resolve {"devcards-marked" {:target :npm :require "marked"}
                                 "devcards-syntax-highlighter" {:target :npm :require "highlight.js"}}}
}

Thanks for the input @thheller!

[filipesilva]

Runtime execution proper will still fail with the following message:

Uncaught ReferenceError: DevcardsMarked is not defined
    at Object.devcards$util$markdown$markdown_to_html [as markdown_to_html]

This seems to happen because of these configuration items:

https://github.com/bhauman/devcards/blob/65caa84c9438dd8bdf8cd21964e6033b1a22c178/src/deps.cljs#L1-L12

@bhauman would you be receptive to using CLJSJS deps for marked and highlight.js as before?

[thheller]

I guess the usual CLJSJS compatibility method can also be used here.

Similar to https://github.com/thheller/shadow-cljsjs/blob/master/src/main/cljsjs/marked.cljs

[davidpham87]

I managed to make it work with this trick:

{:builds
 {:app
  {:build-options {:ns-aliases {devcards-marked cljsjs.marked
                                devcards-syntax-highlighter cljsjs.highlight}}}}}

Thanks to a slack message from @thheller about aliasing the namespace.

And also defining cljsjs.marked (mutatis mutandis for cljsjs.highlight)

(ns cljsjs.marked
  (:require ["marked" :as marked]))

(js/goog.exportSymbol "marked" marked)
(js/goog.exportSymbol "DevcardsMarked" marked)

[rberger]

For those like me that had to look up / figure out what mutatis mutandis for cljsjs.highlight meant one had to do:

(ns cljsjs.highlight
  (:require ["highlight.js" :as hljs]))

(js/goog.exportSymbol "hljs" hljs)
(js/goog.exportSymbol "DevcardsSyntaxHighlighter" hljs)

I ended up adding the file @davidpham87 showed for marked and the above code for highlight as two files in:

src/cljsjs/marked.cljs
src/cljsjs/highlight.cljs

[tggreene]

There is slightly less boilerplated way to achieve this relying on the shadow-cljsjs namespaces that should already be available to you, you can add just those devcards specific symbols to your main devcards namespace like so:

(ns devcards.main
  (:require [devcards.core :as devcards]
            ["highlight.js" :as hljs]
            ["marked" :as marked]))

(js/goog.exportSymbol "DevcardsMarked" marked)
(js/goog.exportSymbol "DevcardSyntaxHighlighter" hljs)

Note: you will still need to make "devcards-marked" and "devcards-syntax-highlighter" available to the devcards code using the :resolve or :ns-alias options described above.

[alysbrooks]

Note that to use the latest version of marked, you have to do ["marked" :refer (marked)] because of a change in (I presume) 4.0.0.

[shegeley]

Affirmative. From at least "marked": "^5.0.2", use ["marked" :refer [marked]]

[maxweber]

I created a modified version of devcards that is adapted to shadow-cljs, so that you don't need to remember the workarounds:

https://github.com/simplemono/devcards