Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2020-10-03

Channels

#shadow-cljs
<
2020-10-03
>
Karol Wójcik09:10:56

I got some issue while trying to setup https for development. For context I have isomorphic application which I'm porting to shadow. Browser bundle & statics are served from https://example.com and it works perfectly fine, but shadow websocket is unable to connect due to mixed content. 

websocket.cljs:12 Mixed Content: The page at '' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint ''. This request has been blocked; this endpoint must be available over WSS.
Any ideas how to overcome it?

victorb10:10:22

Try :devtools {:use-document-protocol true}

Karol Wójcik11:10:02

Fixed it by including ssl in shadow!

kimim12:10:02

Hello, If I configured two modules, how can I watch both modules? Thanks. 

{:app
    {:target :browser
     :output-dir "target/cljsbuild/public/js"
     :asset-path "/js"
     :modules {:app {:entries []}
               :login {:entries [vorstellung.login]}}}

lispers-anonymous13:10:32

Good morning. https://shadow-cljs.org/ seems to be having some troubles. Firefox is showing me this error. 

Warning: Potential Security Risk Ahead

Firefox detected an issue and did not continue to . The website is either misconfigured or your computer clock is set to the wrong time.

It's likely the website's certificate is expired, which prevents Firefox from connecting securely. If you visit this site, attackers could try to steal information like your passwords, emails, or credit card details.

thheller14:10:26

@jiyinyiyong the SSL cert seems to have expired

Karol Wójcik18:10:55

Any ideas what causes it? It seems that adding the :modules {} broke the build. 

base ❯ clj -A:dev:shadow-cljs release browser
[:browser] Compiling ...
npm package "react-transition-group" expected version "react@^15.0.0" but "16.13.1" is installed.
npm package "react-transition-group" expected version "react-dom@^15.0.0" but "16.13.1" is installed.
NullPointerException: 
	com.google.javascript.jscomp.JSModuleGraph.dependsOn (JSModuleGraph.java:371)
	com.google.javascript.jscomp.JSModuleGraph.getDeepestCommonDependencyInclusive (JSModuleGraph.java:467)
	com.google.javascript.jscomp.JSModuleGraph.getDeepestCommonDependencyInclusive (JSModuleGraph.java:482)
	shadow.build.closure.ReplaceCLJSConstants.process (ReplaceCLJSConstants.java:46)
	com.google.javascript.jscomp.Compiler.process (Compiler.java:1066)
	com.google.javascript.jscomp.Compiler.runCustomPasses (Compiler.java:1089)
	com.google.javascript.jscomp.Compiler.check (Compiler.java:1043)
	com.google.javascript.jscomp.Compiler.performChecksAndTranspilation (Compiler.java:855)
	com.google.javascript.jscomp.Compiler.lambda$stage1Passes$0 (Compiler.java:785)
	com.google.javascript.jscomp.CompilerExecutor.runInCompilerThread (CompilerExecutor.java:129)
	com.google.javascript.jscomp.Compiler.runInCompilerThread (Compiler.java:843)
	com.google.javascript.jscomp.Compiler.stage1Passes (Compiler.java:783)
	com.google.javascript.jscomp.Compiler.compileModules (Compiler.java:756)
	sun.reflect.NativeMethodAccessorImpl.invoke0 (NativeMethodAccessorImpl.java:-2)
	sun.reflect.NativeMethodAccessorImpl.invoke (NativeMethodAccessorImpl.java:62)
	sun.reflect.DelegatingMethodAccessorImpl.invoke (DelegatingMethodAccessorImpl.java:43)
	java.lang.reflect.Method.invoke (Method.java:498)
	clojure.lang.Reflector.invokeMatchingMethod (Reflector.java:167)
	clojure.lang.Reflector.invokeInstanceMethod (Reflector.java:102)
	shadow.build.closure/compile-js-modules (closure.clj:1064)
	shadow.build.closure/compile-js-modules (closure.clj:1053)
	shadow.build.closure/optimize/fn--13180 (closure.clj:1253)
	shadow.build.closure/optimize (closure.clj:1239)
	shadow.build.closure/optimize (closure.clj:1230)
	shadow.build.api/optimize (api.clj:271)
	shadow.build.api/optimize (api.clj:265)
	shadow.build/optimize (build.clj:457)
	shadow.build/optimize (build.clj:449)
	shadow.cljs.devtools.api/release* (api.clj:339)
	shadow.cljs.devtools.api/release* (api.clj:324)
	shadow.cljs.devtools.cli-actual/do-build-command (cli_actual.clj:28)
	shadow.cljs.devtools.cli-actual/do-build-command (cli_actual.clj:25)
	shadow.cljs.devtools.cli-actual/do-build-commands (cli_actual.clj:49)
	shadow.cljs.devtools.cli-actual/do-build-commands (cli_actual.clj:38)
	shadow.cljs.devtools.cli-actual/main/body-fn--17785--auto----18493 (cli_actual.clj:166)
	shadow.cljs.devtools.cli-actual/main (cli_actual.clj:165)
	shadow.cljs.devtools.cli-actual/main (cli_actual.clj:132)
	clojure.core/apply (core.clj:669)
	clojure.core/apply (core.clj:660)
	shadow.cljs.devtools.cli-actual/-main (cli_actual.clj:219)
	shadow.cljs.devtools.cli-actual/-main (cli_actual.clj:217)
	clojure.lang.Var.applyTo (Var.java:705)
	clojure.core/apply (core.clj:665)
	clojure.core/apply (core.clj:660)
	shadow.cljs.devtools.cli/-main (cli.clj:75)
	shadow.cljs.devtools.cli/-main (cli.clj:67)
	clojure.lang.Var.applyTo (Var.java:705)
	clojure.core/apply (core.clj:665)
	clojure.main/main-opt (main.clj:491)
	clojure.main/main-opt (main.clj:487)
	clojure.main/main (main.clj:598)
	clojure.main/main (main.clj:561)
	clojure.lang.Var.applyTo (Var.java:705)
	clojure.main.main (main.java:37)

Karol Wójcik18:10:39

@thheller I don't know whether it's common, but I experience about 400kb increase in bundle size when using multiple modules.

thheller18:10:36

thats not normal and not something I have ever seen

thheller18:10:44

the above I also don't know

thheller18:10:52

which version is this?

thheller18:10:14

the errors suggests its something wrong with your :modules setup and their :depends-on config

Karol Wójcik19:10:41

@thheller Here is how :modules look like for increased build.

Karol Wójcik19:10:41

Used version is: 2.11.4 

{:browser-core                 {:entries    [core.browser]
                                                             :init-fn    core.browser/main}

                              ;; :view-checkout-payment-stage  {:entries    [view.checkout.payment-stage]
                              ;;                                :depends-on #{:browser-core}},
                              :view-ui-cms-tooltip          {:entries    [view.ui.cms-tooltip]
                                                             :depends-on #{:browser-core}}
                              ;; :view-checkout-delivery-stage {:entries    [view.checkout.delivery-stage]
                              ;;                                :depends-on #{:browser-core}}
                              :view-rich-content            {:entries    [view.rich-content]
                                                             :depends-on #{:browser-core}}
                              :view-debug-page              {:entries    [view.debug-page]
                                                             :depends-on #{:browser-core}}
                              :view-ui-hero                 {:entries    [view.ui.hero]
                                                             :depends-on #{:browser-core}}
                              :view-product-lists           {:entries    [view.product-lists]
                                                             :depends-on #{:browser-core}}
                              :view-about-pages             {:entries    [view.about-pages]
                                                             :depends-on #{:browser-core :view-reservation :view-vouchers}}
                              :view-sis                     {:entries    [view.sis]
                                                             :depends-on #{:browser-core :view-action-pages}}
                              :view-lps-pages               {:entries    [view.lps-pages]
                                                             :depends-on #{:browser-core}}
                              :view-help-forum              {:entries    [view.help-forum]
                                                             :depends-on #{:browser-core}}
                              :view-membership-gifts        {:entries    [view.membership.gifts]
                                                             :depends-on #{:browser-core :view-membership-common}}
                              :view-wines-factory           {:entries    [view.wines-factory]
                                                             :depends-on #{:browser-core}}
                              :view-newsletter              {:entries    [view.newsletter]
                                                             :depends-on #{:browser-core}}
                              :view-recipe                  {:entries    [view.recipe]
                                                             :depends-on #{:browser-core}}
                              :view-settings                {:entries    [view.settings]
                                                             :depends-on #{:browser-core :view-checkout-payment}}
                              :view-notification            {:entries    [view.notification]
                                                             :depends-on #{:browser-core}}
                              :view-cards                   {:entries    [view.cards]
                                                             :depends-on #{:browser-core}}
                              :view-action-pages            {:entries    [view.action-pages]
                                                             :depends-on #{:browser-core}}
                              :view-promo-pages             {:entries    [view.promo-pages]
                                                             :depends-on #{:browser-core}}
                              :view-office-page             {:entries    [view.office-page]
                                                             :depends-on #{:browser-core}}
                              :view-lp-affilation-page      {:entries    [view.lp.affilation-page]
                                                             :depends-on #{:browser-core}}
                              :view-new-brand-shop          {:entries    [view.new-brand-shop]
                                                             :depends-on #{:browser-core}}
                              :view-membership-common       {:entries    [view.membership.common]
                                                             :depends-on #{:browser-core}}
                              :view-reservation             {:entries    [view.reservation]
                                                             :depends-on #{:browser-core :view-vouchers}}
                              :view-membership-rebate       {:entries    [view.membership.rebate]
                                                             :depends-on #{:browser-core :view-product-lists :view-membership-common}}
                              :view-rodo                    {:entries    [view.rodo]
                                                             :depends-on #{:browser-core}}
                              :view-brand-shops             {:entries    [view.brand-shops]
                                                             :depends-on #{:browser-core}}
                              :view-brandbank               {:entries    [view.brandbank]
                                                             :depends-on #{:browser-core}}
                              :view-membership-banner       {:entries    [view.membership.banner]
                                                             :depends-on #{:browser-core :view-membership-common}}
                              :view-lp-membership           {:entries    [view.lp.membership]
                                                             :depends-on #{:browser-core :view-ui-hero :view-lps-pages :view-membership-common :view-membership-banner}}
                              :view-checkout                {:entries    [view.checkout]
                                                             :depends-on #{:browser-core :view-product-lists :view-settings}}
                              :view-importer                {:entries    [view.importer]
                                                             :depends-on #{:browser-core}}
                              :view-survey                  {:entries    [view.survey]
                                                             :depends-on #{:browser-core}}
                              ;; :view-lp-fruits-and-vegs      {:entries    [view.lp.fruits-and-vegs]
                              ;;                                :depends-on #{:browser-core}}
                              :view-cart                    {:entries    [view.cart]
                                                             :depends-on #{:browser-core :view-product-lists}}
                              :view-page-logged-in          {:entries    [view.page.logged-in]
                                                             :depends-on #{:browser-core}}
                              :view-checkout-payment        {:entries    [view.checkout.payment]
                                                             :depends-on #{:browser-core}}
                              :view-login                   {:entries    [view.login]
                                                             :depends-on #{:browser-core}}
                              ;; :view-checkout-products-stage {:entries    [view.checkout.products-stage]
                              ;;                                :depends-on #{:browser-core}}
                              :view-mailing                 {:entries    [view.mailing]
                                                             :depends-on #{:browser-core}}
                              :view-ui-video-player         {:entries    [view.ui.video-player]
                                                             :depends-on #{:browser-core}}
                              :view-cart-promotions         {:entries    [view.cart-promotions]
                                                             :depends-on #{:browser-core :view-vouchers}}
                              :view-shopping-lists          {:entries    [view.shopping-lists]
                                                             :depends-on #{:browser-core :view-product-lists}}
                              :view-products-product-page   {:entries    [view.products.product-page]
                                                             :depends-on #{:browser-core}}
                              :view-contest                 {:entries    [view.contest]
                                                             :depends-on #{:browser-core}}
                              :view-lp-ready-meals-page     {:entries    [view.lp.ready-meals-page]
                                                             :depends-on #{:browser-core :view-ui-hero :view-product-lists :view-lps-pages :view-settings :view-reservation :view-checkout :view-checkout-payment}}
                              :view-email-preview           {:entries    [view.email-preview]
                                                             :depends-on #{:browser-core}}
                              :view-lp-business-page        {:entries    [view.lp.business-page]
                                                             :depends-on #{:browser-core :view-ui-hero :view-rodo}}
                              :view-vouchers                {:entries    [view.vouchers]
                                                             :depends-on #{:browser-core}}}

Karol Wójcik19:10:49

And that configuration was used which ended up with error:

Karol Wójcik19:10:49

{:browser-core                 {:entries    [core.browser]
                                                             :init-fn    core.browser/main}
                              :shared {:depends-on #{:browser-core}}

                              ;; :view-checkout-payment-stage  {:entries    [view.checkout.payment-stage]
                              ;;                                :depends-on #{:browser-core}},
                              :view-ui-cms-tooltip          {:entries    [view.ui.cms-tooltip]
                                                             :depends-on #{:shared}
                                                             }
                              ;; :view-checkout-delivery-stage {:entries    [view.checkout.delivery-stage]
                              ;;                                :depends-on #{:shared}}
                              :view-rich-content            {:entries    [view.rich-content]
                                                             :depends-on #{:shared}}
                              :view-debug-page              {:entries    [view.debug-page]
                                                             :depends-on #{:shared}}
                              :view-ui-hero                 {:entries    [view.ui.hero]
                                                             :depends-on #{:shared}}
                              :view-product-lists           {:entries    [view.product-lists]
                                                             :depends-on #{:shared}}
                              :view-about-pages             {:entries    [view.about-pages]
                                                             :depends-on #{:shared :view-reservation :view-vouchers}}
                              :view-sis                     {:entries    [view.sis]
                                                             :depends-on #{:shared :view-action-pages}}
                              :view-lps-pages               {:entries    [view.lps-pages]
                                                             :depends-on #{:shared}}
                              :view-help-forum              {:entries    [view.help-forum]
                                                             :depends-on #{:shared}}
                              :view-membership-gifts        {:entries    [view.membership.gifts]
                                                             :depends-on #{:shared :view-membership-common}}
                              :view-wines-factory           {:entries    [view.wines-factory]
                                                             :depends-on #{:shared}}
                              :view-newsletter              {:entries    [view.newsletter]
                                                             :depends-on #{:shared}}
                              :view-recipe                  {:entries    [view.recipe]
                                                             :depends-on #{:shared}}
                              :view-settings                {:entries    [view.settings]
                                                             :depends-on #{:shared :view-checkout-payment}}
                              :view-notification            {:entries    [view.notification]
                                                             :depends-on #{:shared}}
                              :view-cards                   {:entries    [view.cards]
                                                             :depends-on #{:shared}}
                              :view-action-pages            {:entries    [view.action-pages]
                                                             :depends-on #{:shared}}
                              :view-promo-pages             {:entries    [view.promo-pages]
                                                             :depends-on #{:shared}}
                              :view-office-page             {:entries    [view.office-page]
                                                             :depends-on #{:shared}}
                              :view-lp-affilation-page      {:entries    [view.lp.affilation-page]
                                                             :depends-on #{:shared}}
                              :view-new-brand-shop          {:entries    [view.new-brand-shop]
                                                             :depends-on #{:shared}}
                              :view-membership-common       {:entries    [view.membership.common]
                                                             :depends-on #{:shared}}
                              :view-reservation             {:entries    [view.reservation]
                                                             :depends-on #{:shared :view-vouchers}}
                              :view-membership-rebate       {:entries    [view.membership.rebate]
                                                             :depends-on #{:shared :view-product-lists :view-membership-common}}
                              :view-rodo                    {:entries    [view.rodo]
                                                             :depends-on #{:shared}}
                              :view-brand-shops             {:entries    [view.brand-shops]
                                                             :depends-on #{:shared}}
                              :view-brandbank               {:entries    [view.brandbank]
                                                             :depends-on #{:shared}}
                              :view-membership-banner       {:entries    [view.membership.banner]
                                                             :depends-on #{:shared :view-membership-common}}
                              :view-lp-membership           {:entries    [view.lp.membership]
                                                             :depends-on #{:shared :view-ui-hero :view-lps-pages :view-membership-common :view-membership-banner}}
                              :view-checkout                {:entries    [view.checkout]
                                                             :depends-on #{:shared :view-product-lists :view-settings}}
                              :view-importer                {:entries    [view.importer]
                                                             :depends-on #{:shared}}
                              :view-survey                  {:entries    [view.survey]
                                                             :depends-on #{:shared}}
                              ;; :view-lp-fruits-and-vegs      {:entries    [view.lp.fruits-and-vegs]
                              ;;                                :depends-on #{:shared}}
                              :view-cart                    {:entries    [view.cart]
                                                             :depends-on #{:shared :view-product-lists}}
                              :view-page-logged-in          {:entries    [view.page.logged-in]
                                                             :depends-on #{:shared}}
                              :view-checkout-payment        {:entries    [view.checkout.payment]
                                                             :depends-on #{:shared}}
                              :view-login                   {:entries    [view.login]
                                                             :depends-on #{:shared}}
                              ;; :view-checkout-products-stage {:entries    [view.checkout.products-stage]
                              ;;                                :depends-on #{:browser-core}}
                              :view-mailing                 {:entries    [view.mailing]
                                                             :depends-on #{:browser-core}}
                              :view-ui-video-player         {:entries    [view.ui.video-player]
                                                             :depends-on #{:browser-core}}
                              :view-cart-promotions         {:entries    [view.cart-promotions]
                                                             :depends-on #{:browser-core :view-vouchers}}
                              :view-shopping-lists          {:entries    [view.shopping-lists]
                                                             :depends-on #{:browser-core :view-product-lists}}
                              :view-products-product-page   {:entries    [view.products.product-page]
                                                             :depends-on #{:browser-core}}
                              :view-contest                 {:entries    [view.contest]
                                                             :depends-on #{:browser-core}}
                              :view-lp-ready-meals-page     {:entries    [view.lp.ready-meals-page]
                                                             :depends-on #{:browser-core :view-ui-hero :view-product-lists :view-lps-pages :view-settings :view-reservation :view-checkout :view-checkout-payment}}
                              :view-email-preview           {:entries    [view.email-preview]
                                                             :depends-on #{:browser-core}}
                              :view-lp-business-page        {:entries    [view.lp.business-page]
                                                             :depends-on #{:browser-core :view-ui-hero :view-rodo}}
                              :view-vouchers                {:entries    [view.vouchers]
                                                             :depends-on #{:browser-core}}}

thheller19:10:58

yikes. splits like that are completely pointless

thheller20:10:42

well not completely but very unlikely to be optimal

thheller20:10:10

don't you get a bazillion really small files and then a couple really large ones?

thheller20:10:42

totally possible that something in the system breaks with this many modules. never seen this many before 😛

Karol Wójcik20:10:03

Well actually this is what I get.

Karol Wójcik21:10:18

Actually even if I split to two modules I can see about 200kb increase in build size.

thheller22:10:52

the only global variable so modules can access shared code

thheller22:10:49

what does the build report look like? where are the 200kb coming from?

jplaza18:10:58

👋 I’m getting a 

Cannot infer target type in expression (. (. BigJSHandler -prototype) -rep)
For this deftype 
(deftype BigJSHandler []
  Object
  (tag [this v] "bigjs")
  (rep [this ^js/Big v] (.toFixed v))
  (stringRep [this v] nil))

jplaza18:10:33

I think extern inference is not working as expected, maybe I have to provide an externs file?

thheller18:10:05

@jplaza yeah I don't know what that is about. I thing (deftype ^js BigJSHandler ...) fixes it. otherwise you can also set (set! *warn-on-infer* false) before and true after to silence it for now

jplaza18:10:47

Thanks @thheller ! ^js worked perfectly. Also this externs worked too 

var Object = function() {};
Object.prototype.tag = function() {};
Object.prototype.rep = function() {};
Object.prototype.stringRep = function() {};

thheller19:10:32

yeah but you don't actually want externs for this

thheller19:10:38

it is fine if it gets renamed

thheller19:10:16

but it is fine. it is just some kind of regression. don't yet know why the warning is back.