This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
Trying to get my head around this... I am missing some understanding:
I have an app with Pedestal managing the routes.
all routes are hiccup to html via ring (no JS) but one which is a cljs dashboard, so I have in my project.clj(lein) cljsbuild and figwheel configured just for that one page.
Now I'd like to add some js in a couple of divs in the other routes. Can I compile more than just the app.js
so as to require a second and third unique .getElementById
...? What is the right way to build this?
IIUC, you need builds with different main functions/entrypoints. In the old figwheel/lein-cljsbuild/shadow-cljs, you need one build for each entrypoint. With fighweel-main
you can use extra-mains
please tell me if this is more of a lein
or something else question.
Wondering if someone could help identify an issue I’m having with advanced compilation and foreign-libs
. I’m using webpack to bundle my deps together and it’s working in development. When I compile the production build (advanced or simple) - 3 of the 5 deps are undefined when logging them in devtools. I created a gist with the relevant config files. https://gist.github.com/oconn/797dd0b8510fd543b652ce778c1dd7ec
The three deps that are returning undefined are jss
, jss-preset-default
, and react-transition-group
.
When running cat prod-main.js | grep ReactTransitionGroup
the following is output;
var $demo$containers$demos$messaging_demo$global$0module$0react_transition_group$$ = $goog$global$$.ReactTransitionGroup;
console.log($goog$global$$.React, $demo$core$global$0module$0react_dom$$, $goog$global$$.jss, $goog$global$$.jssPresetDefault, $goog$global$$.ReactTransitionGroup);
And then cat prod-main.js | grep ReactTransitionGroup
var $demo$containers$demos$messaging_demo$global$0module$0react_transition_group$$ = $goog$global$$.ReactTransitionGroup;
console.log($goog$global$$.React, $demo$core$global$0module$0react_dom$$, $goog$global$$.jss, $goog$global$$.jssPresetDefault, $goog$global$$.ReactTransitionGroup);
Any helpful tips tracking down the issue would be much appreciated.I’m not as familiar with how foreign-libs works, but could you look for how e.g. $goog$global$$.jss
is defined in each bundle?
So cat prod-main.js | grep $goog$global$$.jss
does not match anything is that to be expected? I’m not very familiar with how the closure compiler works
So cat target/public/cljs-out/dev/cljs_deps.js| grep jss
shows
goog.addDependency("../dist/index.bundle.js", ['jss', 'jss_preset_default', 'react', 'react_dom', 'react_transition_group'], [], {'foreign-lib': true});
goog.addDependency("../hx_comp/core.js", ['hx_comp.core'], ['hx_comp.styles.shadows', 'goog.color', 'jss', 'cljs.core', 'jss_preset_default', 'goog.object', 'hx_comp.styles.resets', 'hx_comp.styles.typography', 'hx_comp.styles.media_queries', 'hx_comp.styles.borders', 'hx_comp.styles.radius', 'hx_comp.styles.spacing']);
goog.addDependency("../demo/core.js", ['demo.core'], ['demo.events.core', 'jss', 'react', 'cljs.core', 'demo.router.core', 'jss_preset_default', 'demo.components.navbar', 'hx_comp.core', 'demo.constants', 'hx_frame.core', 'react_transition_group', 'demo.subscriptions.core', 'demo.db.core', 'hx.react', 'react_dom', 'demo.styles.core']);
I can’t imagine that’s the issue, but it does align with the instructions here: https://clojurescript.org/guides/webpack#using-your-foreign-lib