Fork me on GitHub
#shadow-cljs
<
2021-07-02
>
thheller06:07:58

@hadilsabbagh18 can you provide more details? I cannot tell what you actual problem is

thheller06:07:10

> I don’t know how to build the classpath from my deps.edn file under the dev alias

thheller06:07:15

clj -A:dev?

Alex J Henderson10:07:59

I'm trying to keep a npx shadow-cljs server process running so I can more quickly start and stop watching builds as I switch between git branches in my project. But when I switch branches npx shadow-cljs watch app no longer detects the running server process. Is there a file somewhere or something that I need to keep around which watch app looks for to detect the server?

thheller19:07:01

does switching the branches wipe the .shadow-cljs dir? the detection is based on a file in that dir? otherwise it should be detected fine?

🙏 2
Mikko Harju11:07:40

Just discovered the possibility to have Javascript files alongside CLJS – a very nifty thing to say the least. I'm now intrigued is it possible to trigger "re-compilation" (re-evaluation?) of JS files if I should change the definitions within the JS files, or do I always have to restart node-repl?

Björn Ebbinghaus15:07:12

I have a problem with compiling the new material-ui v5 beta, and I have no idea how to tackle this. shadow-cljs fails to load a file. Reason:

TypeError: _system.keyframes is not a function
 at Object.shadow$provide.module$node_modules$$material_ui$core$node$ButtonBase$TouchRipple (TouchRipple.js:64)
The related JS Code looks like this:
// file -- @material-ui/core/node/ButtonBase/TouchRipple.js
var _system = require("@material-ui/system");
const pulsateKeyframe = (0, _system.keyframes)`... stuff ...`

// file -- @material-ui/styled-engine/index.d.ts
export { ThemeContext, keyframes, css } from '@emotion/react';

// file -- @material-ui/system/index.js
Object.defineProperty(exports, "keyframes", {
  enumerable: true,
  get: function () {
    return _styledEngine.keyframes;
  }
});
I deleted old js output and the .shadow-cljs folder beforehand. (That usually fixes stuff like this. 🙂) Disclaimer: I have no idea of JS or TS modules or shadow-cljs works. Sorry, if I am at the wrong place to ask.

Björn Ebbinghaus15:07:38

// file -- package.json
// Relevant dependencies:
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^5.0.0-beta.0",

thheller19:07:59

this is caused by a dependency conflict

thheller19:07:32

can't remember which one exactly but somewhere there is a dependency conflict on some lib

lucian30302:07:46

i'm seeing:

app.js:1552 TypeError: module.keyframes is not a function
    at Object.shadow$provide.module$node_modules$$material_ui$core$node$ButtonBase$TouchRipple 
with various material ui versions including beta.0 (see my post). i wonder if it's a similar issue. i get it just upgrading shadow/cljs but can't seem to resolve it

Björn Ebbinghaus15:07:05

@U053KNT7C Seems like it is. @U05224H0W Do you have a tip on how to debug this?

lucian30318:07:26

i'm not sure what is happening exactly. i've tried various combinations of dependencies, cljs, shadow, closure compiler, etc. but haven't been able to get any results. i will try a few other versions to see if it makes a difference. it could be an mui issue as originally i was just trying to add in a dependency for the x-grid component that led to similar errors, but then saw that deps have to be updated

Björn Ebbinghaus20:07:13

@U09MR0T5Y The Slack Archive hints to you having this problem back in March. Were you able to find a solution?

bbss02:07:12

Oof, had to look it up to refresh my memory but I'm afraid I didn't get very far in finding the right package versions.. I'm still on v4.

lucian30322:07:36

fwiw, i got arttuka/reagent-material-ui "5.0.0-alpha.29-0" working with cljs 1.10.773 and shadow 2.11.24. Beyond that shadow version, it stopped working (not sure why). would be nice to be able to upgrade and add other packages, but i too am running out of ideas of how to debug such issues

thheller05:07:09

wouldp help if you setup a reproducible repo. I really don't have enough to go on here.

lucian30316:07:51

i'll try to set one up

lucian30302:07:24

ok, here it is @U05224H0W... https://github.com/unifiedcompliance/cljs-test this is the whole front end (which will be open source soon anyway). i stripped out the backend except a minimal pedestal server to serve / and other unnecessary stuff, left the working front end, did the initial commit, upgraded shadow and cljs (and pinned the tools.reader to a version so it could compile at all) and now it's a sea of errors compared to the initial commit. in the past, i also tried to pin versions of

com.google.javascript/closure-compiler-unshaded
                               org.clojure/google-closure-library
                               org.clojure/google-closure-library-third-party 
tried upgrading reagent/mui/other deps at the same time in virtually all combos i could think of, etc. but i cannot get rid of these errors and cannot get the front end working again

thheller05:07:29

sorry but I don't look at projects using lein-shadow. and there is way too much stuff I can't comb through. there should be no docker or anything of that sort to reproduce either.

thheller05:07:39

FWIW this is not a thing you do in shadow :mylo-app-production. it is the same build as :mylo-app and you can just use that. :preloads don't apply to release to in effect the config is identical.

thheller17:07:36

sorry I can't figure this one out either. FWIW I'd probably stay away from beta packages like that one

thheller17:07:44

it just might be the dependency conflict I mentioned

thheller17:07:51

npm package "hoist-non-react-statics" expected version "[email protected]^16.7.0" but "17.0.2" is installed. npm package "prop-types" expected version "[email protected]^16.8.1" but "17.0.2" is installed.

thheller17:07:59

that is the warnings shadow gives you for that

thheller17:07:23

and yarn also gives you plenty of warnings on install

thheller17:07:04

It might be relying on something specific webpack does that shadow does not

lucian30322:07:33

i'll create a shadow only version that's more stripped down. you won't need the dockerfile, i don't know why i even left it in there. it might take me awhile though

thheller06:07:13

@U053KNT7C the repro Björn Ebbinghaus created works fine to reproduce the problem. don't need another one.

👍 2
lucian30302:07:16

@U05224H0W i've updated my project to use shadow-cljs.edn directly and i've been able to narrow down where the error starts to occur. when i upgrade the shadow-cljs version from 2.12.7 -> 2.13.0 or above, I get a bunch of errors and it seems unable to load and run the app or its components. i've also noticed the same thing with @U4VT24ZM3's demo app above. when i change the shadow version to 2.12.7, there is no more error in the console. when i go to 2.13.0, there's an error. i'm not sure if this helps narrow down the issue or not. it's possible the issue is with cljs or some other component that shadow depends on that also changes at that version. here's the diff for the demo repo that makes it work:

diff --git a/deps.edn b/deps.edn
index b072947..71a16bf 100644
--- a/deps.edn
+++ b/deps.edn
@@ -5,6 +5,5 @@
  :aliases {;; See  for Emacs support
            :dev {:extra-paths ["src/test" "src/dev" "src/workspaces"]
                  :jvm-opts ["-XX:-OmitStackTraceInFastThrow"]
-                 :extra-deps {org.clojure/clojurescript {:mvn/version "1.10.866"}
-                              thheller/shadow-cljs {:mvn/version "2.14.6"}
+                 :extra-deps {                              thheller/shadow-cljs {:mvn/version "2.12.7"}
                               binaryage/devtools {:mvn/version "1.0.3"}}}}}
diff --git a/package.json b/package.json
index 9351cae..4aab757 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,6 @@
         "react-dom": "^17.0.2"
     },
     "devDependencies": {
-        "shadow-cljs": "^2.14.6"
+        "shadow-cljs": "2.12.7"
     }
 }
 

thheller03:07:43

hmm interesting. the only change in 2.13 was setting default :output-feature-set :es6. not sure why this would break anything but you can easily set the previous default by setting :compiler-options {:output-feature-set :es5} in your build config

Björn Ebbinghaus08:07:41

Can confirm ES5 working fine. Not a single warning/error.

Björn Ebbinghaus11:07:18

@U05224H0W So. The problem isn't a deps issue after all?

thheller16:07:14

not a clue. when I tested this the keyframes thing existed but yet it failed complaining that it didn't exist. couldn't figure it out.

Björn Ebbinghaus10:07:42

@U05224H0W @U053KNT7C @U01ENMKTW0J had the same problem and solved it: https://github.com/MrEbbinghaus/mui5-shadow-cljs-issue-repro/issues/1 7 days ago and I didn't get a notification. 😅 Adding :js-options {:entry-keys ["module" "browser" "main"]} to the shadow-cljs config resolves this.

Björn Ebbinghaus15:07:13

@U05224H0W Setting :js-options {:entry-keys ["module" "browser" "main"]} leads to other functions not found.

; my-lib/card.cljc
(def content (log/spy :info (interop/react-factory #?(:cljs CardContent :clj nil)))) 

; my-app/some-ns.cljs requireing [my-lib/card :as card]
(log/spy :info CardContent)
(log/spy :info (interop/react-factory CardContent))
(log/spy :info card/content)
Prints this:
(interop/react-factory CardContent) => fn [props & children]
CardContent => {$$typeof: Symbol(react.forward_ref), propTypes: {…}, render: ƒ}
(interop/react-factory CardContent) => fn [props & children]
card/content => undefined
Any idea, how to circumvent this?

thheller15:07:19

well if you use module it'll require following what the modules actually export

thheller15:07:41

so commonjs didn't have the concept of default exports but ES modules do

thheller15:07:27

so likely your require changed from :as Thing to :default Thing. depends on what the libraries do, see the translation table here https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages

thheller15:07:03

esm <-> commonjs interop can be a little annoying

lucian30300:07:14

the :js-options solution above does seem to work for the most part and i was able to upgrade shadow, mui, and react, but i've ran into other issues w/ a couple of the packages, @material-ui/data-grid and @material-ui/x-grid. they are basically the same library, w/ x grid having extra features. on the older version (4.0.0-alpha.21) which works w/ the old 2.12.7 shadow and older mui, i get this after the build completes, but the rest of the app works:

app.js:1551 An error occurred when loading neo.common.components.data_grid.js
env.evalLoad @ app.js:1551
(anonymous) @ app.js:2507
app.js:1552 TypeError: (0 , p.makeStyles) is not a function
    at Object.shadow$provide.module$node_modules$$material_ui$x_grid$dist$index_esm (index-esm.js:2424)
    at Object.shadow.js.jsRequire (js.js:66)
    at Object.shadow.js.require (js.js:113)
    at eval (neo.common.components.data_grid.js:2)
    at eval (<anonymous>)
    at Object.goog.globalEval (app.js:486)
    at Object.env.evalLoad (app.js:1549)
    at app.js:2507
but on versions i think above 4.0.0-alpha.23 or so, i get exceptions during the build itself, either of the below two. i also get this w/ the old shadow version 2.12.7.
[:mylo-app] Build failure:
babel failed?
{:file "/Users/lucian303/Desktop/neo/node_modules/@material-ui/x-grid/dist/index-esm.js"}
ExceptionInfo: babel failed?
	shadow.build.babel/convert-source/fn--11641 (babel.clj:164)
	shadow.build.babel/convert-source (babel.clj:156)
	shadow.build.babel/convert-source (babel.clj:152)
	shadow.build.resolve/make-babel-source-fn/fn--11715 (resolve.clj:202)
	shadow.build.data/get-source-code (data.clj:319)
	shadow.build.data/get-source-code (data.clj:306)
	shadow.build.closure/convert-sources-simple*/iter--11308--11312/fn--11313/fn--11314 (closure.clj:1809)
	shadow.build.closure/convert-sources-simple*/iter--11308--11312/fn--11313 (closure.clj:1808)
	clojure.lang.LazySeq.sval (LazySeq.java:42)
	clojure.lang.LazySeq.seq (LazySeq.java:51)
	clojure.lang.RT.seq (RT.java:535)
	clojure.core/seq--5419 (core.clj:139)
	clojure.core.protocols/seq-reduce (protocols.clj:24)
	clojure.core.protocols/fn--8168 (protocols.clj:75)
	clojure.core.protocols/fn--8168 (protocols.clj:75)
	clojure.core.protocols/fn--8110/G--8105--8123 (protocols.clj:13)
	clojure.core/reduce (core.clj:6830)
	clojure.core/into (core.clj:6897)
	clojure.core/into (core.clj:6889)
	shadow.build.closure/convert-sources-simple* (closure.clj:1837)
	shadow.build.closure/convert-sources-simple* (closure.clj:1804)
	shadow.build.closure/convert-sources-simple (closure.clj:2098)
	shadow.build.closure/convert-sources-simple (closure.clj:2050)
	shadow.build.compiler/maybe-closure-convert (compiler.clj:1195)
	shadow.build.compiler/maybe-closure-convert (compiler.clj:1188)
	shadow.build.compiler/compile-all (compiler.clj:1440)
	shadow.build.compiler/compile-all (compiler.clj:1307)
	shadow.build.api/compile-sources (api.clj:261)
	shadow.build.api/compile-sources (api.clj:253)
	shadow.build/compile (build.clj:442)
	shadow.build/compile (build.clj:432)
	shadow.cljs.devtools.server.worker.impl/build-compile (impl.clj:363)
	shadow.cljs.devtools.server.worker.impl/build-compile (impl.clj:344)
	shadow.cljs.devtools.server.worker.impl/fn--14290 (impl.clj:439)
	shadow.cljs.devtools.server.worker.impl/fn--14290 (impl.clj:428)
	clojure.lang.MultiFn.invoke (MultiFn.java:234)
	shadow.cljs.devtools.server.util/server-thread/fn--14067/fn--14068/fn--14076 (util.clj:284)
	shadow.cljs.devtools.server.util/server-thread/fn--14067/fn--14068 (util.clj:283)
	shadow.cljs.devtools.server.util/server-thread/fn--14067 (util.clj:256)
	java.lang.Thread.run (Thread.java:834)
or (this was huge so i snipped out the middle which seems to be a bunch of dumped js):
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
/Users/lucian303/Desktop/neo/.shadow-cljs/babel-worker/babel-worker.js:7429
!0,Ei.Xa="cljs.core.async.impl.ioc-helpers/t_cljs$core$async$impl$ioc_helpers117711",Ei.Gb=function(b){return Rb(b,"cljs.core.async.impl.ioc-helpers/t_cljs$core$async$impl$ioc_helpers117711")};return new Ei(a,je)}function Gi(a){try{var b=a[0];return b.a?b.a(a):b.call(null,a)}catch(c){if(c instanceof Object)throw b=c,a[6].rb(null),b;throw c;}}function Hi(a,b){b=zi(b,Fi(function(c){a[2]=c;a[1]=4;return Gi(a)}));return H(b)?(a[2]=Cb(b),a[1]=4,mh):null}
                                                                                                                                                                                                                                                                                                                    ^

Error: /Users/lucian303/Desktop/neo/node_modules/@material-ui/x-grid/dist/index-esm.js: Unknown property: L
    at matchProperty (/Users/lucian303/Desktop/neo/.shadow-cljs/babel-worker/babel-worker.js:15854:8)
    at handleLoneUnicodePropertyNameOrValue (/Users/lucian303/Desktop/neo/.shadow-cljs/babel-worker/babel-worker.js:32136:19)
    at getUnicodePropertyEscapeSet (/Users/lucian303/Desktop/neo/.shadow-cljs/babel-worker/babel-worker.js:32145:9)
    at processTerm (/Users/lucian303/Desktop/neo/.shadow-cljs/babel-worker/babel-worker.js:32276:5)
    at /Users/lucian303/Desktop/neo/.shadow-cljs/babel-worker/babel-worker.js:32323:12
    at Array.map (<anonymous>)
    at processTerm (/Users/lucian303/Desktop/neo/.shadow-cljs/babel-worker/babel-worker.js:32322:26)
    at /Users/lucian303/Desktop/neo/.shadow-cljs/babel-worker/babel-worker.js:32323:12
    at Array.map (<anonymous>)
    at processTerm (/Users/lucian303/Desktop/neo/.shadow-cljs/babel-worker/babel-worker.js:32322:26) {
  code: 'BABEL_TRANSFORM_ERROR'
}
[2021-07-30 16:51:35.396 - WARNING] :shadow.build.babel/babel-transform-ex - {:code "import{LicenseInfo as e,useLicenseVerifier as t}from\"@material-ui/x-license\";export{LicenseInfo}from\"@material-ui/x-license\";import*as r from\"react\";import n from\"react\";import{capitalize as l,ownerDocument as o,useEventCallback as a,createSvgIcon as i,unstable_useId as s,useForkRef as c,ownerWindow as u,debounce as d}from\"@material-ui/core/utils\";import p from\"clsx\";import m from\"@material-ui/core/InputBase\";import*as f from\"@material-ui/core/styles\";import{useTheme as g,lighten as b,darken as h}from\"@mater	

RuntimeException EOF while reading
	clojure.lang.Util.runtimeException (Util.java:221)
	clojure.lang.LispReader.read (LispReader.java:268)
	clojure.lang.LispReader.read (LispReader.java:216)
	clojure.lang.LispReader.read (LispReader.java:210)
	clojure.core/read (core.clj:3754)
	clojure.core/read (core.clj:3729)
	clojure.core/read (core.clj:3729)
	clojure.core/read (core.clj:3729)
	shadow.build.babel/babel-transform! (babel.clj:107)
	shadow.build.babel/babel-transform! (babel.clj:93)
	shadow.build.babel/babel-loop (babel.clj:126)
	shadow.build.babel/babel-loop (babel.clj:123)
[:mylo-app] Build failure:
babel failed?
{:file "/Users/lucian303/Desktop/neo/node_modules/@material-ui/x-grid/dist/index-esm.js"}
ExceptionInfo: babel failed?
	shadow.build.babel/convert-source/fn--11641 (babel.clj:164)
	shadow.build.babel/convert-source (babel.clj:156)
	shadow.build.babel/convert-source (babel.clj:152)
	shadow.build.resolve/make-babel-source-fn/fn--11715 (resolve.clj:202)
	shadow.build.data/get-source-code (data.clj:319)
	shadow.build.data/get-source-code (data.clj:306)
	shadow.build.closure/convert-sources-simple*/iter--11308--11312/fn--11313/fn--11314 (closure.clj:1809)
	shadow.build.closure/convert-sources-simple*/iter--11308--11312/fn--11313 (closure.clj:1808)
	clojure.lang.LazySeq.sval (LazySeq.java:42)
	clojure.lang.LazySeq.seq (LazySeq.java:51)
	clojure.lang.ChunkedCons.chunkedNext (ChunkedCons.java:59)
	clojure.core/chunk-next (core.clj:710)
	clojure.core.protocols/fn--8176 (protocols.clj:137)
	clojure.core.protocols/fn--8176 (protocols.clj:124)
	clojure.core.protocols/fn--8136/G--8131--8145 (protocols.clj:19)
	clojure.core.protocols/seq-reduce (protocols.clj:31)
	clojure.core.protocols/fn--8168 (protocols.clj:75)
	clojure.core.protocols/fn--8168 (protocols.clj:75)
	clojure.core.protocols/fn--8110/G--8105--8123 (protocols.clj:13)
	clojure.core/reduce (core.clj:6830)
	clojure.core/into (core.clj:6897)
	clojure.core/into (core.clj:6889)
	shadow.build.closure/convert-sources-simple* (closure.clj:1837)
	shadow.build.closure/convert-sources-simple* (closure.clj:1804)
	shadow.build.closure/convert-sources-simple (closure.clj:2098)
	shadow.build.closure/convert-sources-simple (closure.clj:2050)
	shadow.build.compiler/maybe-closure-convert (compiler.clj:1195)
	shadow.build.compiler/maybe-closure-convert (compiler.clj:1188)
	shadow.build.compiler/compile-all (compiler.clj:1440)
	shadow.build.compiler/compile-all (compiler.clj:1307)
	shadow.build.api/compile-sources (api.clj:261)
	shadow.build.api/compile-sources (api.clj:253)
	shadow.build/compile (build.clj:442)
	shadow.build/compile (build.clj:432)
	shadow.cljs.devtools.server.worker.impl/build-compile (impl.clj:363)
	shadow.cljs.devtools.server.worker.impl/build-compile (impl.clj:344)
	shadow.cljs.devtools.server.worker.impl/fn--14290 (impl.clj:439)
	shadow.cljs.devtools.server.worker.impl/fn--14290 (impl.clj:428)
	clojure.lang.MultiFn.invoke (MultiFn.java:234)
	shadow.cljs.devtools.server.util/server-thread/fn--14067/fn--14068/fn--14076 (util.clj:284)
	shadow.cljs.devtools.server.util/server-thread/fn--14067/fn--14068 (util.clj:283)
	shadow.cljs.devtools.server.util/server-thread/fn--14067 (util.clj:256)
	java.lang.Thread.run (Thread.java:834)
also, i've seen this from that package once or twice when it did compile:
--- node_modules/@material-ui/data-grid/dist/index-cjs.js:17
Cannot convert ECMASCRIPT_2018 feature "RegExp unicode property escape" to targeted output language.
which led me to try adding: :compiler-options {:output-feature-set :es2018}}}} to the options which led to the original error even on the older 2.12.7 version.

Stijn Albert13:06:23

@U053KNT7C did you manage to fix this? I have the exact same problem with MUI data-grid

lucian30304:06:34

no, i ended up using @inovua/reactdatagrid-community instead of x-grid @U02LLEJMREG

Drew Verlee16:07:26

How would i create a release build from clojure, rather then the command line? I'm looking for the docs and don't see an example of this, though im guessing its possible from a namespace such as shadow.cljs.<something> Edit found it: https://shadow-cljs.github.io/docs/UsersGuide.html#clj-run