Clojurians Log v2

for 2 minutes today I was panicking that my shadow-cljs setup broke, but then i realized that the webserver i hosted the build was running from a different docker instance than the shadow-cljs server (same directory mounted in two different instances)

hello, I keep getting the folloiwing error while trying to use https://www.npmjs.com/package/@yaireo/tagify js library,

views.cljs:328 Uncaught TypeError: module$node_modules$$yaireo$tagify$dist$tagify_min.default is not a constructor
    at cmp.eval (views.cljs:328)
    at cmp.reagent$impl$component$custom_wrapper_$_componentDidMount [as componentDidMount] (component.cljs:207)
    at commitLifeCycles (react-dom.development.js:20664)
    at commitLayoutEffects (react-dom.development.js:23427)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3946)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:3995)
    at invokeGuardedCallback (react-dom.development.js:4057)
    at commitRootImpl (react-dom.development.js:23152)
    at exports.unstable_runWithPriority (scheduler.development.js:469)
    at runWithPriority$1 (react-dom.development.js:11277)

the require looks like this ["@yaireo/tagify" :as Tagify]

which corresponds to import Tagify from '@yaireo/tagify'

and the line where the error is thrown looks like this: (Tagify. html-input-element)

it's not clear to me why I'm getting this error because it's previously worked ok (but I might be mistaken; 🤷 )

["@yaireo/tagify" :as Tagify] does NOT correspond to import Tagify from '@yaireo/tagify'

see the translation table here https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages

but it looks like you have ["@yaireo/tagify" :default Tagify]?

maybe need to actually try :as. see the section about default exports in the link above

I am using moment js library in my shadow-cljs project. I have tried including both the cljsjs lib and the npm package. The advanced compilation breaks the moment js usage, any leads on how I can make it work ?

breaks how?

this is the error I see in the browser console, the page never loads -

Uncaught TypeError: Cra.initializeApp is not a function
    Jra <http://localhost:5000/js/main.js:6433>
    &lt;anonymous&gt; <http://localhost:5000/js/main.js:8115>
    onload <http://localhost:5000/:52>

There is no error and the app works fine with shadow-cljs watch app

that doesn't look moment related? where do you call initializeApp or what on?

try shadow-cljs release app --debug

maybe that provides a better clue what fails

thanks lets me try that

Hi. I'm currently not using any "UI component framework" in my cljs app which utilizes shadow. And my compilation times are awesome so far (sub second times for tiny changes : 0.25 - 0.5s). I tried introducing material-ui library to my project. This specific library might be an overkill, really - I just knew that a friend of mine was using it on his project, so I wanted to try it. It's likely I'll not end up using it in the end. Importing the library to my project was easy. But suddenly, even a tiny change in some label inside my namespace resulted in 5-6s compile time instead of sub-1s. No matter how tiny the change was. Would splitting my namespaces into more modules (such as :shared shown in user manual) help here? Or is there any other way of improving the compilation performance?

hmm how did you add it? should only make the compile slower once, after that cache should take care of it

(no, :modules won't do anything regarding performance)

Interesting. I have already stashed my changes in the past, so I'll try to do it again from scratch on current (fast) version. But I guess I just npm-installed the library, created a new namespace which :require-d and aliased the library and then used (r/adapt-react-class to make react class adapters.

that should be fine

I've done the same and it's super fast now 🤦 😄

sometimes helps to restart shadow-cljs if you've just done a npm install. that modifies a lot of files and sometimes shadow-cljs gets out of sync with that

is there any "temporary" folder eg. with some caches for shadow-cljs which one might try deleting when really desperate? 🙂

.shadow-cljs/builds but that usually does nothing. restart is enough.

Ok, perfect. Thanks

@thheller oh, I see the problem now. When I'm only importing ["@material-ui/core" :as mc], it's fine, but once I also add ["@material-ui/icons" :as mi] , the slowness starts.

and I'm not surprised 😱

➜  myproject git:(master) ✗ find node_modules/@material-ui/icons -type f | wc -l
16674
➜  myproject git:(master) ✗ du -sh node_modules/@material-ui/icons          
201M	node_modules/@material-ui/icons

oh you shouldn't be doing that anyways. that will add several megabytes to you build and you are likely not using those thousands of icons

just import what you need directly

same for material-ui too basically. those will bloat your build so much

just (:require ["@material-ui/icons/ZoomIn" :default ZoomIn]) instead of (:require ["@material-ui/icons" :refer (ZoomIn)])

but yeah adding a couple thousand files to your build might make it slower 😉

Indeed 😄. I made a typical textbook mistake. Made too many changes at once. Therefore it didn't occur to me that it was the actual naive import of icons' namespaces which introduced this slowness. I simply thought that it was the library size and complexity which made the compilation slow. Thanks for your help.