okay well i can’t get react-flip-move to import: i get nil. i’m pretty sure this is a bug so i’ll open an issue so you have all the context

^ sorry the problem above is that I had put :js-options inside of :devtools (would be super cool if there were warnings about config keys in unexpected places)

@lee.justin.m shadow-cljs indeed always minimizes files and react unfortunately complains about this during development. for shadow-cljs release it will use their correct production js and not minify the dev version. so the warning is the only problem.

I have created sample repo with both node and browser apps. It is just bare bones. https://github.com/pepe/two-in-shadows

Please tell me what you think about it.

Also I have no problem to hook the #dirac

@pepe cool. you can run shadow-cljs watch client server to watch both builds in one process. no need to use separate processes.

@thheller great, thank you

Hi, I use (:require ["qiniu" :as qiniu]) to import a node library to clojurescript in shadow-cljs. But I got stuck when trying to write javascript

var mac = new qiniu.auth.digest.Mac(key1, key2)

(def mac (-> (qiniu.auth.digest/Mac access-key secret-key)))

qiniu/auth.digest.Mac should work

Thanks!

😂

the aliases created by :as must always be used as-is. qiniu.auth.digest is not a valid alias

OK

(def mac (qiniu/auth.digest.Mac. access-key secret-key))

not the . at the end. that is sugar for new.

So I successfully (and easily) added shared code to the sample. Man it feels great

------ ERROR -------------------------------------------------------------------
 File: /Users/chen/repo/memkits/manuscript/src/app/util.cljs:6:11
--------------------------------------------------------------------------------
   3 |
   4 | (defn focus-text! []
   5 |   (js/requestAnimationFrame
   6 |    (fn [] (let [element (.querySelector js/document ".text"), .focus element] ))))
-----------------^--------------------------------------------------------------
Invalid local name: .focus at line 6 app/util.cljs
--------------------------------------------------------------------------------

no more responding to my file changes after throwing this error...

restarted server to make it work.

well @thheller i really appreciate the help. i wanted to say thanks so much for your help and amazing work you are doing. for now, i have to declare defeat. i’ve spent too much time trying to make my project work in cljs and i just have to go back to javascript where i can be productive.

if there were about 10 more of you i think everything would be different

what happened?

I can't let you go back to JS just yet 😉

basically i’ve got a website i’m trying to build. i use a few libraries: flip-move, react-virtualized, react-dnd. it’s just excruciating to try to figure out how to use them in cljs. what i hate most of all is that i cannot figure out what’s going on. like yesterday trying to figure out why flip-move won’t load. there’s just nothing for me to do. i tried like 50 combinations of random shit in my config files and different versions of libraries

in JS if i have a problem i can methodically work through it. but in cljs i just get stuck. there’s nothing more i know to try

i reported the flipmove issue, but also several of my react-dnd libraries weren’t loading. i got an error message in teh console, but i have no idea what to do about it

so maddening

yeah the :as vs :default issue is a bit annoying due to the inconsistencies in JS

i opened up a new portion of my website that i’m trying to port and saw all of the crazy s* i have built with react-vritualized and i realized it was going to be super hard

did you try :npm-module at all?

this would let you keep your old toolchain and load CLJS into that

the thing is that the primary thing i want from cljs is state management. atoms + specter is freaking amazing

wait

maybe i don’t understand what you’re proposing

https://shadow-cljs.github.io/docs/UsersGuide.html#target-npm-module

this will compile CLJS into something CommonJS-ish

so require from JS just works

but this only generates the CJS output. it is then treated like any other JS file by JS tool, ie. webpack

https://github.com/thheller/shadow-cljs-examples/tree/master/cljs-react-app

so then i just access everything useing the js global accessors?

this demo is a bit old but it demos the integration in create-react-app

no (:require ["react-dnd"]) stays just like that

but instead of shadow-cljs providing the value for this

it just emits require("react-dnd") and lets webpack provide it

so you literally make no modification to your webpack setup

shadow-cljs compile npm (default config included, no extra build config required)

and then require("shadow-cljs/your.ns") and let webpack find it

interesting. question: is there a “verbose” mode in shadow-cljs to explain what it is doing when it tries to load a library?

because that would have helped me when i was trying to figure out what was going on

like literally list every js file it is loading and why

the resolve rules are identical to node

(:require ["react-dnd"]) looks at node_modules/react-dnd/package.json for main

reads that file, parses out all its require calls or import

follows those and so on

it doesn't list the files exactly in the log output but I can add that if you want

I think you got burned hard by the :foreign-libs mess and NOTHING from that applies to shadow-cljs

okay well let me just try to see if i can get these packages to load before i give up

shadow-cljs pretty much does exactly what webpack does

i think the hard part is that in JS you just cut-n-paste whatever magical BS is required to get things to load. you need to understand that stuff and translate it in cljs

https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages

I made a translation table for that exactly

yea but i did that and it didn’t work 🙂

however you got bitten by the problem I described where react-flip-move pretends to be ES when it isn't

believe me there’s nothing you’ve written that i haven’t read at this point

what you can always do is (:require ["thing" :as x]) and then (js/console.log "x" x)

if that is just an object with a .default property you are better off using :default

otherwise :as is always the safer choice

due to old compat issues there may also be a .default$ property but that is just :default again

the situation with ES6 default exports is really strange

but AFAICT thats also true in node world

https://code.thheller.com/blog/shadow-cljs/2017/11/10/js-dependencies-in-practice.html

i guess the other thing i was puzzling through is the fact that reagent used to require cljsjs versions of react. so i excluded those. but I just could be sure what I was doing was working. that’s kind of why i was wishing for some kind of diagnostic.

it still does

but as a migration shadow-cljs includes these shim files

https://github.com/thheller/shadow-cljsjs/blob/master/src/main/cljsjs/react.cljs

can’t i just exclude them?

that seemed to work

excluding is fine but not required

the shim file basically maps the pseudo-ns that :foreign-libs otherwise would create back to the original npm package

wow you know why I couldn’t get react-flip to work? I was putting “.js” at the end of my :js-options :require.

and then exports it to the global name the react foreign lib would have provided

so technically you can require cljsjs.react and use js/React

how exactly? maybe I can validate that?

wait no that’s not it. args this is so annoying. i tried all of this last night and it didnt work

why are you messing with it at all?

https://github.com/thheller/issue-194/blob/master/src/starter/browser.cljs

i mean i saw that flip move had different distros and i tried resolving it to the .es module even before i reported that issue

:js-options
{:resolve
  {"react-flip-move" {:target :npm :require "react-flip-move/dist/react-flip-move.es"}}}

now it’s working and i want to know how i screwed up so i don’t do it again

did I mess that up?

no that works but i swear i tried that

:require "react-flip-move/dist/react-flip-move.es.js"

should be fine too

the only difference is that i use “react-flip-move/dist/react-flip-move.es.js”

but both of those work now

so back on my larger project. what does this mean and how i diagnose it:

shadow-cljs - failed to load module$node_modules$react_dnd$lib$DragDropContextProvider
shadow.js.jsRequire @ shadow.js.js:53
shadow$provide.module$node_modules$react_dnd$lib$index @ index.js:17
shadow.js.jsRequire @ shadow.js.js:51
shadow.js.require @ shadow.js.js:77
(anonymous) @ seekeasy.sidebar.js:10

the actual error should be in there as well

it rethrows the actual error that happened when importing

so you should get an exception

the message just informs you which file failed to load

module$node_modules$react_dnd$lib$DragDropContextProvider is the internal namespace that is generated for the file

Is the build target exposed anywhere? I have code which works in both node & browser with only a slight change.

node_modules/react-dnd/lib/DragDropContextProvider.js in this case

unless something is messed up with my chrome, the above is all i got

uhm I can't tell the actual error either, thats weird

is this a fresh page reload?

it literally just rethrows the error https://github.com/thheller/shadow-cljs/blob/master/src/main/shadow/js.js#L53-L54

no idea why that wouldn't show anywhere?

i’m going to try in a different browser

you can try chrome with pause on exception maybe

I just tested (:require ["react-dnd"]) and it works just fine. what exactly do you require?

same thing with firefox. i’m going to downgrade to react 15

see if i get different resutls

I'm on react v16

i’ll try this then i’ll start commenting things out until i get something sane

@thheller Hmm, yes, I hadn't considered that conditional requires might be tricky territory. I don't want to compile into a single js particularly, I want to write a standalone js module (I think, haven't explored this far). Is there anything specific you'd recommend?

:closure-defines is static at compile time. if you prefer to detect at runtime instead you could use js/process.browser

JS tools like webpack will set this. shadow-cljs does as well

@lee.justin.m react-dnd seems painfully hard to use even from the JS side. I would probably never be able to use this without looking at the docs every time.

that’s true 🙂

i have it working though

combining this with the weirdness that reagent does sometimes just smells like pain

okay. now i’m losing my mind. i have removed react-flip-move from packages.json. my dependencies look like:

:dependencies
 [[org.clojure/clojure "1.9.0"]
  [org.clojure/clojurescript "1.9.946"]
  [reagent "0.8.0-alpha2" :exclusions [cljsjs/react cljsjs/react-dom cljsjs/creat-react-class cljsjs/react-dom-server]]
  [hiccup "1.0.5"]
  [secretary "1.2.3"]
  [cljs-http "0.1.44"]
  [com.rpl/specter "1.1.0"]
  [venantius/accountant "0.2.3" :exclusions [org.clojure/tools.reader]]
  [binaryage/oops "0.5.8"]
  [org.clojure/test.check "0.9.0"]]

The required JS dependency "react-flip-move" is not available, it was required by "cljsjs/react_flip_move.cljs"

something is still requiring cljsjs.react-flip-move

I think re-frame-trace does that

i’m not using re-frame

is there a way to dump the dependency resolution graph?

kind of like yarn list

or npm list

shadow-cljs clj-repl

(shadow.cljs.devtools.api/find-resources-using-ns 'cljsjs.react-flip-move)

I should probably show the full graph in that exception, eg. everyone involved in that require

that is SUPER useful

okay got all of my stupidity out of the way. now i have a create-react-class issues:

shadow.js.js:53 shadow-cljs - failed to load module$node_modules$create_react_class$index
shadow.js.jsRequire @ shadow.js.js:53
shadow.js.require @ shadow.js.js:77
(anonymous) @ reagent.impl.component.js:3
shadow.js.js:54 Uncaught TypeError: m.Component is not a constructor
    at Object.shadow$provide.module$node_modules$create_react_class$index (index.js:23)
    at Object.shadow.js.jsRequire (shadow.js.js:51)
    at Object.shadow.js.require (shadow.js.js:77)
    at reagent.impl.component.js:3

weirdly, reagent will render a simple div

that means reagent is trying to new something thats supposed to be used a function

but I don't understand why you are getting failed to load?

are you sure you are calling the DragSource setup stuff correctly?

i removed all of that stuff

i’m trying to get back to a hello-world and now i’ve obviously messed the buid configuration up so bad it won’t work

is this in the test project? I'd love to see this state

this doesn’t work anymore because of all the load errors:

(defn thing [] [:div "goodbye world"])

(defn mount-root []
  (reagent/render [thing]
                  (.getElementById js/document "app")))

and the build config?

there might be a caching error somewhere if you modified the node_modules directly while the compile is running

since that modifies so many files it might just give up at some point

the shadow config is just the dependencies vector, no additional options

i’ll nuke everything and restart

nothing is working. somehow i’ve messed up react and reagent. i downgraded to reagent 0.7.0 and i’ve installed the cljsjs/react.js shim

you never need to include the cljsjs/react shim. shadow-cljs provides this

did you nuke target/shadow-cljs?

I'd really love to see the state the project is in though

just tried that. same thing. so I should install react, react-dom, and create-react-app via npm, righT?

yes

create-react-class you mean?

create-react-app no

sorry i mean create-react-class

omg. i deleted node_modules, killed yarn.lock. only those three dependencies (react 15). i have reagent 0.7.0 with no exclusions. killed target. that got me back to a working state

you did restart the shadow-cljs process right?

I mean the actual server process? didn't leave anything running in the background or so?

uh I know what might have happend

yea i haven’t been backgrounding the server because this smelled like caching. the one thing i haven’t been doing is killing the target. killing the target and resetting node_modules fixed whatever chaos i had created

npm can install nested versions. so it maybe installed node_modules/thing/node_modules/react

but shadow-cljs only looks at node_modules/react never the nested versions?

maybe yarn thought a thing was installed because it was nested

but shadow-cljs didn't find it and errored out on you?

hmm damn we might never know 😛

i really don’t think that was it because i’m pretty sure i was looking at the create-react-class files

well just wait 30 minutes and i’ll probably have it royally screwed up again

🙂

Does shadow-cljs clear the js console now?

no

Damnit, wtf

😛

I have no idea whats doing it, but every refresh seems to clear the console, which is actually a bit convenient

console.clear = function () { throw "who be calling me"; }

eval that in the chrome console 😉

Nothing is thrown

hmmm guess that doesn't work then 😛

Yeah, either way, I think I like it, so if I find it and fix it, I would have to reimplement it

doesn't sound like a terrible idea so maybe I can add it behind a flag

would be good to find out who does it though

Yeah, but should be trivial in the reload fn too. What would be even better is if the console can be scrolled to the bottom

Have a good weekend 🙂

thx, you too!

I wanted to see if I can compile a modern JS application with shadow-cljs. Turns out I can with no modifications to the source whatsoever. Only config stuff and a manual babel pass due to JSX.

https://github.com/thheller/react-redux-realworld-example-app/tree/this-is-madness

I'll probably write a blog post about this. I guess I can claim that shadow-cljs has pretty good JS support when it can do this. 😉

that’s pretty amazing

i’m working through some unexpected things, but i really think most of my problems were related to a stale build

thats unfortunate. I have not had any caching issues in years for CLJS

npm/yarn however do scary stuff to the node_modules folder sometimes

so I can't claim reliable caching for that yet

needs a lot more testing

flipmove working, react-dnd working

wohoo!

the sheer non-determinism and crazy insanity that plagued me yesterday is gone

the only weird thing that is happening is that when i’m off of the main entry point, reloading breaks now, presumably because i’m using html5 history

I think you need to stick that into a defonce

I’m using :http-handler shadow.http.push-state/handle

thats only relevant when you reload the page manually

right of course. when i’m not on the root path and i change the code, everything goes haywire and i have to reload

when I try to reload from the non-root path, something super werid happend

hmm it shouldn't affect the reloading itself but I don't know what you do :after-load

oh maybe that’s the problem

i would have though :after-load should just re-mount the root reagent component

well shadow-cljs doesn't do anything other than calling the specified function. so it is up to you.