This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-08-25
Channels
- # announcements (2)
- # babashka (35)
- # beginners (74)
- # calva (26)
- # cider (14)
- # clojure (74)
- # clojure-dev (27)
- # clojure-europe (9)
- # clojure-italy (2)
- # clojure-nl (2)
- # clojure-spec (10)
- # clojure-uk (9)
- # clojuredesign-podcast (6)
- # clojurescript (40)
- # data-science (1)
- # datalog (7)
- # events (1)
- # figwheel-main (13)
- # fulcro (11)
- # graalvm (58)
- # helix (4)
- # jobs (4)
- # jobs-discuss (9)
- # kaocha (23)
- # malli (5)
- # meander (112)
- # membrane (7)
- # off-topic (13)
- # pedestal (2)
- # re-frame (4)
- # reitit (1)
- # rewrite-clj (1)
- # rum (2)
- # sci (3)
- # shadow-cljs (79)
- # sql (12)
- # tools-deps (17)
- # vim (15)
- # vrac (11)
- # xtdb (6)
@pavel.klavik yes that is current. you can either add the namespaces you want to load in a module via the build config :entries
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])}
?
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."
[loadable]
(react/lazy
(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)]])
orgpad.client.views.administration.core/administration is just a reagent component
thx, react interop is something I am never using very frequently, so it is quite tricky to get it right
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
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 (https://github.com/thheller/shadow-cljs/commit/28169be104149e496b31bad443be7ecb6d16cd4a) and is tagged as [BREAKING].
This lead to build failure for my app using BlueprintJS
📄 Short error:
[:app] Build failure:
Failed to inspect file
/Users/shivekkhurana/WIP/tmp/blueprint-cljs/node_modules/@blueprintjs/icons/lib/cjs/generated/iconContents.js
it was required from
/Users/shivekkhurana/WIP/tmp/blueprint-cljs/node_modules/@blueprintjs/icons/lib/cjs/index.js
Errors encountered while trying to parse file
/Users/shivekkhurana/WIP/tmp/blueprint-cljs/node_modules/@blueprintjs/icons/lib/cjs/generated/iconContents.js
{: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"
com.google.javascript.jscomp.parsing.ParserRunner.parse (ParserRunner.java:155)
com.google.javascript.jscomp.JsAst.parse (JsAst.java:152)
com.google.javascript.jscomp.JsAst.getAstRoot (JsAst.java:55)
shadow.build.closure.JsInspector.getFileInfo (JsInspector.java:176)
shadow.build.closure.JsInspector.getFileInfoMap (JsInspector.java:190)
shadow.build.npm/get-file-info*/fn--10535 (npm.clj:549)
shadow.build.npm/get-file-info* (npm.clj:548)
shadow.build.npm/get-file-info* (npm.clj:490)
shadow.build.npm/get-file-info (npm.clj:611)
shadow.build.npm/get-file-info (npm.clj:608)
shadow.build.npm/find-resource (npm.clj:709)
shadow.build.npm/find-resource (npm.clj:661)
shadow.build.resolve/find-npm-resource (resolve.clj:123)
shadow.build.resolve/find-npm-resource (resolve.clj:94)
shadow.build.resolve/fn--12489 (resolve.clj:257)
shadow.build.resolve/fn--12489 (resolve.clj:226)
clojure.lang.MultiFn.invoke (MultiFn.java:244)
shadow.build.resolve/find-resource-for-string (resolve.clj:81)
shadow.build.resolve/find-resource-for-string (resolve.clj:70)
shadow.build.resolve/resolve-string-require (resolve.clj:375)
shadow.build.resolve/resolve-string-require (resolve.clj:358)
shadow.build.resolve/resolve-require (resolve.clj:591)
shadow.build.resolve/resolve-require (resolve.clj:584)
shadow.build.resolve/resolve-deps/fn--12441 (resolve.clj:52)
clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
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)
shadow.build.resolve/resolve-deps (resolve.clj:50)
shadow.build.resolve/resolve-deps (resolve.clj:34)
shadow.build.resolve/resolve-string-require (resolve.clj:400)
shadow.build.resolve/resolve-string-require (resolve.clj:358)
shadow.build.resolve/resolve-require (resolve.clj:591)
shadow.build.resolve/resolve-require (resolve.clj:584)
shadow.build.resolve/resolve-deps/fn--12441 (resolve.clj:52)
clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
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)
shadow.build.resolve/resolve-deps (resolve.clj:50)
shadow.build.resolve/resolve-deps (resolve.clj:34)
shadow.build.resolve/resolve-string-require (resolve.clj:400)
shadow.build.resolve/resolve-string-require (resolve.clj:358)
shadow.build.resolve/resolve-require (resolve.clj:591)
shadow.build.resolve/resolve-require (resolve.clj:584)
shadow.build.resolve/resolve-deps/fn--12441 (resolve.clj:52)
clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
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)
shadow.build.resolve/resolve-deps (resolve.clj:50)
shadow.build.resolve/resolve-deps (resolve.clj:34)
shadow.build.resolve/resolve-string-require (resolve.clj:400)
shadow.build.resolve/resolve-string-require (resolve.clj:358)
shadow.build.resolve/resolve-require (resolve.clj:591)
shadow.build.resolve/resolve-require (resolve.clj:584)
shadow.build.resolve/resolve-deps/fn--12441 (resolve.clj:52)
clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
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)
shadow.build.resolve/resolve-deps (resolve.clj:50)
shadow.build.resolve/resolve-deps (resolve.clj:34)
shadow.build.resolve/resolve-string-require (resolve.clj:400)
shadow.build.resolve/resolve-string-require (resolve.clj:358)
shadow.build.resolve/resolve-require (resolve.clj:591)
shadow.build.resolve/resolve-require (resolve.clj:584)
shadow.build.resolve/resolve-deps/fn--12441 (resolve.clj:52)
clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
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)
shadow.build.resolve/resolve-deps (resolve.clj:50)
shadow.build.resolve/resolve-deps (resolve.clj:34)
shadow.build.resolve/resolve-string-require (resolve.clj:400)
Caused by:
StackOverflowError:
com.google.javascript.jscomp.parsing.IRFactory.handleJsDoc (IRFactory.java:678)
com.google.javascript.jscomp.parsing.IRFactory.transform (IRFactory.java:829)
com.google.javascript.jscomp.parsing.IRFactory$TransformDispatcher.processBinaryExpressionHelper (IRFactory.java:1840)
com.google.javascript.jscomp.parsing.IRFactory$TransformDispatcher.processBinaryExpression (IRFactory.java:1816)
com.google.javascript.jscomp.parsing.IRFactory$TransformDispatcher.process (IRFactory.java:3275)
File in question: https://unpkg.com/browse/@blueprintjs/[email protected]/lib/cjs/generated/iconContents.js
@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 !
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 https://storybook.js.org/ working with shadow-cljs? I'm trying to follow @thheller's post https://clojureverse.org/t/using-storybook-with-cljs/1495, but it's from a couple years ago and the https://github.com/shadow-cljs/examples/tree/master/cljs-storybook doesn't work anymore.
I'm trying to follow https://github.com/jacekschae/shadow-cljs-examples/blob/master/cljs-storybook/shadow-cljs.edn which seems based on your post, but I'm getting "No available JS runtime" in my CIDER REPL with a similar config:
:storybook
{:target :npm-module
:output-dir "out"
:entries [app.storybook]
:devtools {:enabled false}}}
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!
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
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.
I created an example ~3 months ago: https://github.com/lilactown/storybook-cljs
@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"],
};
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
Oh, really? I thought that would be the only way to do it. Where are the *_story.js
files coming from?
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
I suppose another way you could do it is to configure storybook to just statically include stories.core.js
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.