Question about code-splitting and loading of dependent modules.

[Khalid Jebbari]

Hello,

I create 3 modules in the :modules configuration, say :cljs-base, :a & :b, and know that module :a depends on code in the module :b (and in :cljs-base of course). If I manually load only :a with `(cljs.loader/load :a)`, will it automatically load :b? My local testing seems to show that it doesn't.

[Khalid Jebbari]

In case it wasn't clear, the javascript file for :cljs-base is included as a script tag in the html, and it loads :a.

[Thomas Heller]

You didn't show your config but did you correctly configure that :a depends on :b? eg. :depends-on #{:b}? That can't be inferred so you must manually configure it.

[Khalid Jebbari]

Yes I did. Calling load :a loads :b in XHR then nothing, doesn't load :a afterwards.

--
Note that posts from new members are moderated - please be patient with your first post.
---
You received this message because you are subscribed to a topic in the Google Groups "ClojureScript" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/clojurescript/NwRtAgr9ltc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to clojurescrip...@googlegroups.com.
To post to this group, send email to clojur...@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.

[Thomas Heller]

In standard CLJS you must add a manual call to let the runtime know that your module finished loading.

(cljs.loader/set-loaded! :a)

Somewhere near the "end" of your modules. Only with this call will the runtime continue loading the code.

https://clojurescript.org/guides/code-splitting

[Khalid Jebbari]

I did this already in all modules. I noticed I had to add to the :main namespace (loader/set-loaded! :cljs-base)

[Khalid Jebbari]

I realize it's much better if I give the complete configuration.

latest ClojureScript stable 1.10.516

deps.edn alias: {:cljs {:main-opts ["-m" "cljs.main" "-co" "cljs-dev.edn" "--compile"]}}

cljs-dev.edn file:

{:main           "my-app.core"

 :parallel-build true

 :optimizations  :simple

 :output-dir     "target/js"

 :modules        {:cljs-base   {:output-to  "target/js/main.js"

                                :source-map true}

                  :page1       {:entries    #{"my-app.layout.page1"}

                                :output-to  "target/js/page1.js"

                                :source-map true}

                  :page2       {:entries    #{"my-app.layout.page2"}

                                :output-to  "target/js/page2.js"

                                :source-map true}

                  :page3       {:entries    #{"my-app.layout.page3"}

                                :output-to  "target/js/page3.js"

                                :depends-on #{:components1}

                                :source-map true}

                  :page4       {:entries    #{"my-app.layout.page4"}

                                :output-to  "target/js/page4.js"

                                :depends-on #{:components1 :components2}

                                :source-map true}

                  :page5       {:entries    #{"my-app.layout.page5"}

                                :output-to  "target/js/page5.js"

                                :depends-on #{:components1 :components2}

                                :source-map true}

                  :components1 {:entries    #{"my-app.components.common.components1"}

                                :output-to  "target/js/components1.js"

                                :source-map true}

                  :components2 {:entries   #{"my-app.components.common.components2"}

                                :output-to "target/js/components2.js"}}

 }

So my point here is to remove code from cljs-base that is common to some pages but not all of them and putting them into the split :components1 and :components2. The compilation works, the split are good (I verified the javascript produced for every file) but the runtime behavior is incorrect. My problem is that when I load :page3 with (loader/load :page3 my-callback), I see a requests to components1.js with response 200 OK, but no request to page3.js after, and my-callback is not executed.

On Friday, February 1, 2019 at 1:01:33 PM UTC+1, Khalid Jebbari wrote:

[Thomas Heller]

To me that still sounds like you are missing a (cljs.loader/set-loaded! :components1) call in my-app.components.common.components1. Each module must call set-loaded! at some point. In shadow-cljs this is taken care of automatically but CLJS otherwise requires that you do this manually. If you have the set-loaded! calls in the proper places and it should work. If it doesn't I'd recommend creating a fully reproducible example and report it.

[Khalid Jebbari]

Indeed, I had forgotten to call set-loaded! for the components splits. I feel stupid... Thanks for the help !