Fork me on GitHub

@pavel.klavik yes that is current. you can either add the namespaces you want to load in a module via the build config :entries

Pavel Klavík14:08:23

So I got almost everything running with the following code:

[:> react/Suspense {:fallback (r/reactify-component [loading/loading :loading/administration])}
                 [:> (lazy/component (slazy/loadable orgpad.client.views.administration.core/administration))]]
But I am getting the following error:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in Suspense (created by root-component)
    in div (created by root-component)
    in div (created by root-component)
    in root-component (created by orgpad.client.views.root.root)
    in orgpad.client.views.root.root
What am I doing wrong?


I don't know? what is (lazy/component (slazy/loadable orgpad.client.views.administration.core/administration))? returning?


{:fallback (r/reactify-component [loading/loading :loading/administration])} should likely be {:fallback (r/as-element [loading/loading :loading/administration])}?

Pavel Klavík15:08:59

Sorry, I have rewritten it like this:

(ns orgpad.client.views.widgets.lazy
  (:require ["react" :as react]
            [reagent.core :as r]
            [shadow.lazy :as slazy]
            [orgpad.client.views.loading :as loading]))

(defn- component
  "React Lazy component which waits till the code is loaded and then replaces it with the component itself."
    (fn []
      (-> (slazy/load loadable)
          (.then (fn [root-el]
                   #js {:default (r/reactify-component (fn [props] [@loadable props]))}))))))

(defn lazy
  "Renders a component whose source code may have to be first loaded. While the source code is loaded, renders the
  loading screen for the given state. The single parameter is a map having the following keys:

  :lazy/loadable - Call (slazy/loadable ).
  :lazy/state - The loading state while the component's source code is loaded."
  [{:lazy/keys [loadable state]}]
  [:> react/Suspense {:fallback (r/reactify-component [loading/loading state])}
   [:> (component loadable)]])

Pavel Klavík15:08:21

orgpad.client.views.administration.core/administration is just a reagent component

Pavel Klavík15:08:20

ok, changing to as-element fixed the problem

👍 1
Pavel Klavík15:08:11

thx, react interop is something I am never using very frequently, so it is quite tricky to get it right


or by adding them to the :require of a namespace you added to the :entries


I think in order to get spec errors to pretty print properly in cljs with expound you need to eval (require '[expound.alpha :as expound]) (set! clojure.spec.alpha/*explain-out* expound.alpha/printer) in the clojure vm that compiles macros… Is there a way to wire shadow-cljs up to do that?


like maybe putting it in a user.clj at the root of the shadow jvms classpath?


@rickmoynihan instrument errors will not be affected by that?


shadow-cljs already does this for spec errors it prints itself. so if you write (let [x]) or so the resulting spec error is printed by expound


its instrument errors I want


then you need to eval the above in CLJS not CLJ


but I don't even know if instrument uses that printer?


I haven't used instrument myself, too scared of the code modifications it does 😛


Hmm… I might have misdiagnosed this then


I wonder if it’s because my spec error is occuring inside a core.async go block


actually I think this might be something else 👀


Sorry, stupid question. Trying to import a npm module but failed. What can I do about it?

Closure compilation failed with 1 errors
--- node_modules/jspdf/dist/jspdf.umd.min.js:355
Duplicate let / const / class / function declaration in the same scope is not allowed.


Heya! Has somebody here faced some issues with importing CJS modules after upgrading to shadow version 2.11? This version was releases 2 days ago ( and is tagged as [BREAKING].


This lead to build failure for my app using BlueprintJS


📄 Short error:

[:app] Build failure:
Failed to inspect file

it was required from

Errors encountered while trying to parse file
  {:line 1, :column 1, :message "The file could not be parsed as JavaScript."}


📑 Full Error


RuntimeException: Exception parsing "/Users/shivekkhurana/WIP/tmp/blueprint-cljs/node_modules/@blueprintjs/icons/lib/cjs/generated/iconContents.js" ( ( ( ( (*/fn--10535 (npm.clj:549)* (npm.clj:548)* (npm.clj:490) (npm.clj:611) (npm.clj:608) (npm.clj:709) (npm.clj:661) (resolve.clj:123) (resolve.clj:94) (resolve.clj:257) (resolve.clj:226)
	clojure.lang.MultiFn.invoke ( (resolve.clj:81) (resolve.clj:70) (resolve.clj:375) (resolve.clj:358) (resolve.clj:591) (resolve.clj:584) (resolve.clj:52)
	clojure.lang.PersistentVector.reduce (
	clojure.core/reduce (core.clj:6827)
	clojure.core/reduce (core.clj:6810)
	shadow.cljs.util/reduce-> (util.clj:47)
	shadow.cljs.util/reduce-> (util.clj:46) (resolve.clj:50) (resolve.clj:34) (resolve.clj:400) (resolve.clj:358) (resolve.clj:591) (resolve.clj:584) (resolve.clj:52)
	clojure.lang.PersistentVector.reduce (
	clojure.core/reduce (core.clj:6827)
	clojure.core/reduce (core.clj:6810)
	shadow.cljs.util/reduce-> (util.clj:47)
	shadow.cljs.util/reduce-> (util.clj:46) (resolve.clj:50) (resolve.clj:34) (resolve.clj:400) (resolve.clj:358) (resolve.clj:591) (resolve.clj:584) (resolve.clj:52)
	clojure.lang.PersistentVector.reduce (
	clojure.core/reduce (core.clj:6827)
	clojure.core/reduce (core.clj:6810)
	shadow.cljs.util/reduce-> (util.clj:47)
	shadow.cljs.util/reduce-> (util.clj:46) (resolve.clj:50) (resolve.clj:34) (resolve.clj:400) (resolve.clj:358) (resolve.clj:591) (resolve.clj:584) (resolve.clj:52)
	clojure.lang.PersistentVector.reduce (
	clojure.core/reduce (core.clj:6827)
	clojure.core/reduce (core.clj:6810)
	shadow.cljs.util/reduce-> (util.clj:47)
	shadow.cljs.util/reduce-> (util.clj:46) (resolve.clj:50) (resolve.clj:34) (resolve.clj:400) (resolve.clj:358) (resolve.clj:591) (resolve.clj:584) (resolve.clj:52)
	clojure.lang.PersistentVector.reduce (
	clojure.core/reduce (core.clj:6827)
	clojure.core/reduce (core.clj:6810)
	shadow.cljs.util/reduce-> (util.clj:47)
	shadow.cljs.util/reduce-> (util.clj:46) (resolve.clj:50) (resolve.clj:34) (resolve.clj:400)
Caused by:
StackOverflowError: ( ($TransformDispatcher.processBinaryExpressionHelper ($TransformDispatcher.processBinaryExpression ($TransformDispatcher.process (


Why do I get an infer warning on this?

(.on nodejs/process "SIGTERM" (fn []))


Cannot infer target type in expression (. nodejs/process on "SIGTERM" (fn []))


why wouldn't you? what is nodejs/process?


[cljs.nodejs :as nodejs]


I fixed the warning by doing ^js (.on nodejs/process "SIGTERM" (fn []))


just use (js/process.on ...) and banish cljs.nodejs from your codebase 😛


@shivekkhurana look at the file on your disk? it might be corrupted somehow? I vaguely remember someone having this problem before?


I'm messaging on the github issue for better visibility. Thanks for the quick response !


ah just saw the full stacktrace


looks like a problem in the closure compiler. dunno what that is about but I vaguely remember seeing problems with this file before. unfortunately its lost in slack history


@psdp unfortunately I can't remember if this was fixable. it was reported before but I think there was nothing to do except using the CDN distro of jspdf


Anybody have working with shadow-cljs? I'm trying to follow @thheller's post, but it's from a couple years ago and the doesn't work anymore.


yeah pretty sure it doesn't work anymore


I'm trying to follow which seems based on your post, but I'm getting "No available JS runtime" in my CIDER REPL with a similar config:

  {:target     :npm-module
   :output-dir "out"
   :entries [app.storybook]
   :devtools {:enabled false}}}


that means the JS hasn't been loaded


but yeah I wouldn't have much hope of this working


I appreciate the tip, that'll save me some time. Do you have any tips for getting dev-cards working with shadow-cljs?


Also, sorry I didn't find the user guide entry. I did a CMD-f search for :npm-module, which I've never used before. That keyword doesn't appear in the user guide section you just linked, maybe that's why I missed it. Thought I'd give you a heads up!


I don't understand what you just said


which guide?


you mean the repl troubleshoot section doesn't specifically mention :npm-module? thats because there are a bazillion gazillion ways to use :npm-module and I can't possibly list all the "solutions"


eg. storybook js processes and bundles the :npm-module output and I have no clue what it does to it


and therefore no clue if the REPL can even possibly work


but the gist of it is that the JS needs to be loaded SOMEWHERE. which is why you should probably read the whole thing and not skip over it


That is what I meant. I was just saying that my CMD-f search for :npm-module in the Shadow-CLJS User Guide didn't lead me to the REPL Troubleshooting section, which is why I asked here. I thought you might appreciate knowing why a reader may have missed it.


Thanks once again for getting back to me so quickly! I'll read through and try one more time on Storybook, and then I'll try for dev-cards next.


@lilactown I think I've made it to the end of your example. I've successfully got "hi" printing out in the browser console.


I wanted to let you know that I think there's a typo in the Configuring Storybook section's code example:

module.exports = {
  stories: ["../stories/**/*.stories.js", "../out/**/*_story.js"],
  addons: ["@storybook/addon-actions", "@storybook/addon-links"],


what’s the typo?


The example is adding "../out/**/*_story.js", but your CLJS namespace is stories.core, which for me is resulting in a stories.core.js file in my out folder.


Instead of "../out/**/*_story.js" , I've added "../out/**/stories.*.js" to the module.exports list in main.js and it seems to be working.


hmm I don’t think we actually need stories.core to be included in the storybook build


I suppose you can organize how you want


Oh, really? I thought that would be the only way to do it. Where are the *_story.js files coming from?


the part I left out is creating a namespace


Ooooh I see now. I couldn't think of why else there might be *_story.js files, so I assumed it was a typo.


yeah. what I’m doing is a bit weird. basically, I enumerate each story namespace in two places: • stories.core so that shadow-cljs knows to build it • in the storybook config using the glob pattern, so that the built file gets picked up by storybook’s CLI


Either way, you've gotten me much farther than I thought I would get with this!


I suppose another way you could do it is to configure storybook to just statically include stories.core.js


How did you find out the .babelrc was necessary? I would never have thought of that.


years of experience working with JS bundlers 😂


I can’t remember now why it was necessary tbh


Also, how are you getting away without using the storiesOf API?


Oh wait, I see, it seems like you're basically using the new CSF style.


Where they depend on default exports etc. I'm actually trying to avoid that, it seems to rely on having one file per React component. Reagent components are so small that I tend to have multiple per file. I'm thinking the older storiesOf API will be more accommodating to that, let me know if you have another idea!


@lilactown That's an amazing resource, thank you! Very well written. I'll let you know if I get it working.


kinda funny that you say "integrating the latest storybook (v5)" when apparently v6 came out since. wonder what they broke this time 😉


lmao. right? we can’t keep up