Hello! I’ve been testing shadow-cljs and bumped into a similar issue reported by others with not being able to import css-modules (npm-libraries that basically just wrap css-files). To work around the issue I went with a solution suggested in this thread with creating a separate js-bundle that only contains the module containing css which is then prebuilt with webpack: https://clojurians.slack.com/archives/C6N245JGG/p1603638343132300 Is creating a separate bundle still close to the “best practise” for getting around this problem?

hard to say. some css-modules are precompiled so the code has foo.css require but also a foo.css.js file exists. those should work fine

if the .js files don't exist you only option is going with webpack yes

I'm using lazy loading for Reagent components as described in https://code.thheller.com/blog/shadow-cljs/2019/03/03/code-splitting-clojurescript.html, and for some reason it works in Firefox but not in Chromium. My code is as follows:

(ns website.my-component)

(defn <my-component>
  []
  [:div "Hello world!"])

(ns website.core
  (:require ["react" :as react]
            [shadow.lazy :as lazy]
            [reagent.core]
            [reagent.dom]))

(def *<my-component>
  (lazy/loadable website.my-component/<my-component>))

(defn <app-root>
  []
  [:> react/Suspense {:fallback (reagent.core/as-element [:div "Loading..."])}
   [:>
    (if (lazy/ready? *<my-component>)
      (reagent.core/reactify-component (fn [& _] [@*<my-component>]))
      (react/lazy
       #(do (prn "loading step 1")
            (-> (lazy/load *<my-component>)
                (.then (fn [_<elem>]
                         (prn "loading step 2")
                         #js {:default (reagent.core/as-element
                                        (fn [& _]
                                          (prn "loading step 3")
                                          [@*<my-component>]))}))))))]])
(defn init-app!
  []
  (reagent.dom/render [<app-root>] (.getElementById js/document "app")))

much easier to answer with the full code

@thheller I edited the code. Does that help?

s/def?

def* 😉

why not use the full setup from my example? actually using React.lazy I mean?

hmm.. not sure I follow

I am using react/lazy just like in https://github.com/thheller/code-splitting-clojurescript/blob/master/src/main/demo/util.cljs#L16 if that's what you mean

not quite

that needs to be a def. not something you recall on every render

use this part I mean https://github.com/thheller/code-splitting-clojurescript/blob/master/src/main/demo/util.cljs#L15

pulling it into the render function doesn't work since that recreates it every time never allowing react.lazy to do what it does

ah okay

perhaps it's getting garbage-collected in Chrome then?

dunno. :default (reagent.core/as-element this also seems wrong

did you check the browser console for errors?

yeah like I wrote, no errors

I'll try defing the react/lazy call and see if that resolves it

@thheller I changed the code to the following, but it didn't help:

(ns website.my-component)

(defn <my-component>
  []
  [:div "Hello world!"])

(ns website.core
  (:require ["react" :as react]
            [shadow.lazy :as lazy]
            [reagent.core]
            [reagent.dom]))

(def *<my-component>
  (lazy/loadable website.my-component/<my-component>))

(def lazy-component
  (react/lazy
   #(do (prn "loading step 1")
        (-> (lazy/load *<my-component>)
            (.then (fn [_]
                     (prn "loading step 2")
                     #js {:default (reagent.core/reactify-component
                                    (fn [& _]
                                      (prn "loading step 3")
                                      [:div "hello"]))}))))))

(defn <app-root>
  []
  [:> react/Suspense {:fallback (reagent.core/as-element [:div "Loading..."])}
   [:> lazy-component]])

(defn init-app!
  []
  (reagent.dom/render [<app-root>] (.getElementById js/document "app")))

It seems to me that the problem isn't really in this code, but somewhere else. In Firefox, the module JS gets loaded after the "loading step 1" printout, but in Chrome it's not loaded at all.

why do you introduce all the extra stuff?

sorry, what extra stuff?

(lazy/ready? *<my-component>)?

should be just [:> lazy-component] nothing else

okay yeah sure

the point of that was to avoid calling react/lazy on every render

now that I moved react/lazy to a def I forgot to get rid of it

the entire point of react/lazy is to call it on every render

either way, I got rid of it now and it didn't make a difference

it handles the if stuff for you. so you are just repeating it, which is redundant

neat

try to not use prn when debugging stuff

just use (js/console.log ...) instead. async printing is icky if you expect output to show up in the REPL

okay, sure

that doesn't make a difference in this case though

this is also not just using [:div "hello"] instead of the actual lazy component?

yeah

I figured I'd eliminate the possibility that there was something wrong when the code was being rendered

to be clear, this shows up as an empty single-page div with "Loading..." in Chrome, and "hello" in Firefox

but does it load the extra module with the component?

it does not in Chrome

in Firefox, it does

dunno. if you want to setup a repo so I can check it out I can take a look

sure

Out of a sudden I am seeing this error, what does it mean?

error: Error: Unable to resolve module  from /Users/matthew/Drive/dev/mobile2/target/app/index.js:  could not be found within the project or in these directories:
  node_modules
> 1 | var $CLJS = global;
    |                    ^
  2 | var shadow$start = new Date().getTime();
  3 | var shadow$provide = global.shadow$provide = {};
  4 | var goog = global.goog = {};

that is not a shadow-cljs error? where/when do you get that?

inside metro

I am developing with react native.

What does the error say? Is the global object missing or what else?

I don't know. as I said this is not a shadow-cljs error. without more context I cannot guess further.

@thheller FYI I managed to get it working by restarting my computer, cleaning my browser cache, and deleting .shadow-cljs and all build files

not sure which one of those fixed it 🙂

apologies for wasting your time

(my hunch is that Chromium had somehow cached an old JS build file, that it wasn't letting go despite me hard refreshing the page)

if you use the :dev-http server that can't happen since it sets the proper cache headers

if you use any other webserver then sure that can happen (or a service worker)

yeah, that's probably it

I'll double check my cache headers

Every time if a namespace mismatches, shadow will get stuck and stops compiling even if after I fixed the naming issue:

What does SHADOW_ENV.evalLoad do?

Also, what does this line mean?

$CLJS.shadow$js["../../resources/assets/landing-bg.jpg"] = function() { return require("../../resources/assets/landing-bg.jpg"); };

Reason I asked this is, in my source code, if I replace the line

(defonce landing-bg (js/require (config/asset-path "landing-bg.jpg")))

(defonce landing-bg (js/require "../../resources/assets/landing-bg.jpg"))

$CLJS.shadow$js["../../resources/assets/landing-bg.jpg"] = function() { return require("../../resources/assets/landing-bg.jpg"); };

Further more background on this, the react native require only supports literal strings and dynamic variables are not supported, (see https://reactnative.dev/docs/images#:~:text=In%20order%20for%20this%20to%20work%2C%20the%20image%20name%20in%20require%20has%20to%20be%20known%20statically). So I think I might go with macro so that it will be expanded to literal strings.

However, the generated file missies the $CLJS.shadow$js["../../resources/assets/landing-bg.jpg"] = function() { return require("../../resources/assets/landing-bg.jpg"); }; line compared to the case of a vanilla (defonce landing-bg (js/require "../../resources/assets/landing-bg.jpg")) .

js/require must be a single simple string. macros are not supported there.

where can I find an offline version of the User Guide?

curl -O