This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-10-05
Channels
- # announcements (19)
- # babashka (28)
- # beginners (62)
- # biff (3)
- # calva (19)
- # cider (24)
- # clj-kondo (8)
- # cljdoc (15)
- # clojure (32)
- # clojure-europe (16)
- # clojure-nl (1)
- # clojure-norway (17)
- # clojure-uk (8)
- # clojuredesign-podcast (26)
- # cursive (64)
- # datomic (43)
- # deps-new (1)
- # fulcro (4)
- # honeysql (1)
- # hyperfiddle (46)
- # kaocha (16)
- # lsp (15)
- # missionary (51)
- # music (1)
- # nbb (4)
- # off-topic (55)
- # pedestal (11)
- # podcasts-discuss (1)
- # polylith (7)
- # practicalli (1)
- # releases (4)
- # shadow-cljs (120)
- # tools-build (34)
- # vscode (1)
- # xtdb (2)
Any tips for compiling in low-memory (512MB) environments? I allocated a GB of swap but it only uses a little and then I get OOM.
if its running in a container then memory allocation may be wrong on older jvm versions
otherwise 512mb is borderline, take away all the OS and stuff you can be lucky to have 256mb for shadow-cljs
which will likely fail when trying to make a release build, as the closure compiler probably requires more. :advanced
is pretty memory intense
fwiw you can try :jvm-opts ["-Xmx300M"]
in shadow-cljs.edn
top level for 300mb heap limit. only works when not using project.clj or deps.edn to manage dependencies.
Thank you @U05224H0W; worked for me.
Hello! I've read the great blog post :https://code.thheller.com/blog/shadow-cljs/2020/05/08/how-about-webpack-now.html#option-2-js-provider-external:. I'd like to https://callstack.github.io/react-native-paper/docs/guides/react-native-web#configure-webpack react-native-vector-icons
, but also I'd like to rely on https://shopify.github.io/react-native-skia/docs/getting-started/web#loading-skia react-native-skia
in the browser. This is in an effort to get both toolsets via react-native-web
. Is this not possible with shadow-cljs
? (I haven't tried to use code-splitting with :external
, but thought I'd ask ahead of time).
you can try https://shadow-cljs.github.io/docs/UsersGuide.html#_js_tree_shaking but not sure how far you'll get. don't know any of these libs or how they are packaged
Thanks for the reply. Going to try a different tack first.
[:standalone] Build failure:
Failed to inspect file
/Users/dmg46664/projects/xxxx/node_modules/react-native-paper/lib/commonjs/assets/back-chevron.png
Is there a way to tell shadow-cljs
to not try to resolve https://github.com/callstack/react-native-paper/blob/d698282af14555cef8e546e4ead00bf6fd608e56/src/components/Appbar/AppbarBackIcon.tsx#L21❔
I don't even need it to do what webpack
does because I'm not using that part of the lib.
(webpack would convert it into an asset loadable resource)
{
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
type: 'asset/resource'
}
well that wouldn't work as webpack will then return the url for that image for that call
you can use :js-options {:ignore-asset-requires true}
instead, but that'll effectively set source
to false
Can I do that only for a particular npm?
what would that help? shadow-cljs doesn't support any of them, so just ignoring 1 doesn't get you anywhere 😛
Fair 😅
Except that way I would be aware of new problems on new libraries.
last time I looked at react-native-web
it very much expected webpack, not sure if this has changed. it has been a couple years.
So close 😅
[:standalone] Build failure:
Closure compilation failed with 20 errors
--- node_modules/react-native-paper/lib/commonjs/components/Menu/Menu.js:91
Transpilation of 'Member references this or super' is not yet implemented.
hehe yeah the closure compiler is a bit behind on cutting edge not-even-standard-yet features 😛
Thanks, but no gravy. Pity that shadow can't run babel
plugins on the code before bundling... ;-)
Morning @U05224H0W, I tried to webpack
the two modules regexing everything else in externals
but now I realise that Transpilation of 'Member references this or super' is not yet implemented.
isn't a babel issue. There are modules that the Closure compiler just can't do 🤯 . Lends credence to the following argument: https://tonsky.me/blog/clojurescript-2/
Transpilation of 'Member references this or super' is not yet
how do you get this error when using :js-provider :external
?
No, I webpacked those two modules to a new file and then included them. The externals
was in the webpack config.
Otherway around, post process webpack output with shadow.
My thinking was, if shadow can't prep these modules. I'll bundle them in webpack, externalising everything else.
Using this technique: https://github.com/liady/webpack-node-externals#why-not-just-use-a-regex-in-the-webpack-config
what does "externalizing everything" mean? my webpack-fu is limited, so I don't know what that means
do you have a repo so I can see the setup? I'm kinda lost what your goal is at this point
Or https://webpack.js.org/configuration/externals/ . My webpack foo is always limited, but I thought what the hell, give it a try 😅 .
I'll prep a repo. The problem isn't that I only need to output webpack :js-provider :external
as a part solution. As per the original post, I also need to code-split the clojure code because of a second library.
I mean you linked this https://shopify.github.io/react-native-skia/docs/getting-started/web/#loading-skia and I see no problem with this working in CLJS?
import React from 'react';
import { Text } from "react-native";
// Notice the import path `@shopify/react-native-skia/lib/module/web`
// This is important only to pull the code responsible for loading Skia.
// @ts-expect-error
import { WithSkiaWeb } from "@shopify/react-native-skia/lib/module/web";
export default function App() {
return (
<WithSkiaWeb
getComponent={() => import("./MySkiaComponent")}
fallback={<Text>Loading Skia...</Text>}
/>
);
}
I see at least 4 bundles. 1) CLJS code that includes the outer Skia shim to pre load the WASM. 2) The webpack canvas WASM bundle which :js-provider :external
would force me to manage 3) CLJS My main clojure app 4) A webpack bundle including`react-native-paper`
There is an extra kink. The reason I want code (1) instead of "the external file", is because (1) will eventually be https://github.com/cjohansen/portfolio once https://github.com/cjohansen/portfolio/issues/12 is solved (there's a plan).
Yeah, will prep a repo.
MySkiaComponent
is your main app. It needs to be loaded AFTER the wasm code loads.
Ok, so the answer to my original question is "Yes, you can combine code-splitting and js-provider external
"
Thanks, and sorry for the run around.
I guess I knew that shadow does a lot of work of interrogating dependencies and will move code between modules based on its dependencies. I couldn't see how that would work if deps were all external, so assumed code-splitting may not be catered for. That was behind my original question.
I still understand nothing about this. CLJS side code splitting is not affected by :external
in any way, it just works
but this is an optimization problem? I'd focus on getting this to work first? or am I missing something?
No, not an optimisation problem.
Will try code-splitting and js external, and only come back if I have further problems 😅
@U05224H0W be careful what you offer 😛. I was trying to recreate the repo until I got stuck. I wrote it up here: https://github.com/dmg46664/problems/blob/main/0010_shadow_rn_paper/README.md. The 0010_shadow...
directory represents the issue.
all I can say is that this is all missing? https://shopify.github.io/react-native-skia/docs/getting-started/web/#manual-webpack-installation
Hmm, I'll take a look. I started from here https://github.com/dmg46664/problems/tree/main/0009_portfolio_skia_render which successfully does the same break up with shadow (without webpack)... but perhaps moving to :external
means I need that now. Thanks for spotting, will try and revert.
btw, this is a bad idea. public should never be on the classpath.
:paths ["src"
"public"]
:aliases
{:standalone {:extra-paths ["src-standalone"]}
:portfolio {:extra-paths ["src-portfolio"]}}}
this also doesn't seam ideal, kinda annoying to have to restart shadow-cljs to do the other buildThanks for the tip re-classpath. The whole react-native-web
thing is just to speed up dev, and include Portfolio, so no security concern. Got it from here https://github.com/cjohansen/sasha/blob/main/shadow-cljs.edn#L10 😅
I.e. it's in the setup "sample" instruction here: https://github.com/cjohansen/portfolio
sorry I'm lost. I'm not at all talking about :dev-http
. maybe you misunderstand what :paths ["src" "public"]
does. you don't need it to make this :dev-http
work.
I understand what it does re my own source files, but in terms of why it was on that link I posted above, I don't know. Just copy-pasta'd it.
"The source code for the sample is https://github.com/cjohansen/sasha." That's where I copied it from.
this also has no public
anywhere in :paths
. I don't really care where you got it from, I'm saying it is better to remove it and save yourself from some headaches this can produce
My bad, I was confusing the two.
this whole react-native-web thing is such an extreme mess, everything arround it is just
one thing you were missing to even active webpack code splitting was
:external-index "dist/externs.js"
:external-index-format :esm
also note that :external-index "dist/externs.js"
is not externs, externs are an entirely different thing. just to be clear, doesn't matter what you call it. might get confusing though 😛
ok, so I think I get it now. it is totally relying on some built-in webpack semantics of how/when which code gets loaded, and since the external-index makes it look like everything is used at once for webpack it doesn't split as expected by the skia stuff
Sorry, yeah. Lots going on and I probably didn't do the best job explaining. Just note that I was able to replicate the webpack example only using shadow... but when I have to use webpack (with which I am liable to burn myself) for react-native-paper
, then it's harder for me to reason about.
https://reactnativepaper.com/ meant to work with both react-native and web.
Yeah, as I said before I got Skia stuff working fine without webpack as well 🙂
yes, but you named the problem 0010_shadow_rn_paper
but there is no use or mention of paper anywhere
so the actual propblem that is demonstrating is that :external
doesn't work for the skia stuff
:face_palm: Yeah, the one thing I forgot to include in the demo app was react-native-paper
. Too much juggling.
Paper needs babel stuff for webpack
, Skia just needs code splitting (doesn't care how).
I think I stopped prepping 0010 at the first error, so hadn't got to the paper part.
Paper also has stuff that doesn't go through the Closure compiler...
I found a solution to make :external
work with code splitting, but it'll require a little more work to get to work in :advanced
properly
@U05224H0W Thanks! I missed these updates. Looking forward to seeing the shape of the solution.
@U05224H0W Hello, should I create an issue for this? I'm a little scared to attempt to describe it as it took a while in the first attempt.
what I tried didn't quite work out, or turned out to be much more work than anticipated
Thanks for the update! :-)
Hi, I am new to cljs and shadow and I'm doing an experiment with integrating with an existing next.js codebase. I am targeting ESM, but when I import the js file generated by shadow in my next project, I get error error Error [ReferenceError]: SHADOW_ENV is not defined
.
I searched this channel and saw in some cases you must include shared.js
first, but I do not see such a file being output by my build. I assume I'm making a simple mistake, any guidance would be appreciated. Thanks.
This is the build section of my shadow-cljs.edn
:
:builds
{:app
{:target :esm
:output-dir "public"
:runtime :node
:js-options {:js-provider :import}
:modules
{:hello {:exports {hellofn hello/hello-fn}}}
}}}
it has been a while since I looked at next.js. there is no shared.js
file to load there, you only have the public/hello.js
, which I assume you are loading from the JS code