Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
filipesilva opened this issue Jun 7, 2020 · 10 comments

Comments

@filipesilva
Copy link

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
Copy link
Contributor

thheller commented Jun 7, 2020

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
Copy link
Author

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
Copy link
Author

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:

devcards/src/deps.cljs

Lines 1 to 12 in 65caa84

{:foreign-libs
[{:file "devcards/js_libs/highlight.pack.js"
:provides ["devcards-syntax-highlighter"]
:global-exports {devcards-syntax-highlighter DevcardsSyntaxHighlighter}}
{:file "devcards/js_libs/marked.min.js"
:provides ["devcards-marked"]
:global-exports {devcards-marked DevcardsMarked}}]
:externs ["devcards/js_libs/highlight.ext.js"
"devcards/js_libs/marked.ext.js"]
:npm-deps {"create-react-class" "15.6.3"
"react" "16.13.1"
"react-dom" "16.13.1"}}

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

@thheller
Copy link
Contributor

thheller commented Jun 7, 2020

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
Copy link

davidpham87 commented Jun 7, 2020

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
Copy link

rberger commented Oct 13, 2020

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
Copy link

tggreene commented Jun 15, 2021

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
Copy link

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
Copy link

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

@maxweber
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants