Fork me on GitHub
#re-frame
<
2018-09-15
>
rgm15:09:19

Can anyone point me to an example of using re-frame-10x with the clojurescript + webpack foreign-libs approach? https://clojurescript.org/guides/webpack

rgm15:09:10

(also, because I’m a masochist &/or wanting to get a better understanding of how things are plumbed together, I’m using figwheel-main via tools.deps and the clojure CLI tool).

bhauman16:09:13

@rgm so where’s the hang up?

rgm16:09:58

I think it’s in 10x not having access to some part of cljsjs react

rgm16:09:35

(also: full disclosure … I recognize I am on the top of of a big pile of confusion of my own making and really appreciate any help)

bhauman16:09:55

so there are several things to keep in mind

bhauman16:09:01

first you install your deps

rgm16:09:14

oh, more detail: react et al are coming in as foreign libs, yep.

rgm16:09:25

I’ve excluded them

bhauman16:09:32

yes that’s the import part

bhauman16:09:03

in your foreign-libs have to map to what is being required by 10x

bhauman16:09:26

and you have to have :npm-deps false

rgm16:09:35

my best guess right now is that my webpack import dance is not quite right

bhauman16:09:27

and you are hitting an error where react isn’t found?

rgm16:09:29

this is my webpack source file

rgm16:09:48

it’s not quite that … lemme get the exact console error.

rgm16:09:04

figwheel’s happily compiling everything but it’s falling over at runtime

bhauman16:09:13

yeah that makes sense

bhauman16:09:29

but personally I’d start smaller

bhauman16:09:06

start with reagent, then reagent/reframe, that reagent/reframe/reframe-10x

bhauman16:09:21

this stuff is hard to track down

bhauman16:09:07

but I see you are trying to port a project whole hog

rgm16:09:42

ha, I think my sequence was start with re-frame 10.5, bump reagent to 0.8 because (I think) that one doesn’t assume cljsjs react (YOLO), then leaflet/vega, then 10x

bhauman16:09:23

oh and it fell down with 10x

bhauman16:09:04

so did you match up the react version with reagent?

rgm16:09:12

this is what I get as soon as I turn on the 10x preload

rgm16:09:37

yeah, all is working very well until I turn on the 10x preload

rgm16:09:45

Then it’s `Uncaught Error: Undefined nameToPath for cljsjs.react at visitNode (base.js:1357) at visitNode (base.js:1355) at visitNode (base.js:1355) at visitNode (base.js:1355) at visitNode (base.js:1355) at visitNode (base.js:1355) at visitNode (base.js:1355) at Object.goog.writeScripts_ (base.js:1369) at Object.goog.require (base.js:706) at (index):15`

bhauman16:09:49

well that’s a bigger problem

bhauman16:09:27

so cljsjs.react is required somewhere

rgm16:09:47

clojure -Stree doesn’t seem to show it anywhere

bhauman16:09:07

this seems like a caching problem

bhauman16:09:23

probably isn’t

bhauman16:09:35

rm -rf "target/public"

bhauman16:09:55

if you are using the standard setup

bhauman16:09:24

so index:15

rgm16:09:42

hm, nope … cleaning isn’t doing it.

bhauman16:09:27

so it’s crawling through the dependencies and writingout the script tags to load them

bhauman16:09:12

ok look at your cljs_deps.js file in your output dir

bhauman16:09:21

or whatever its called

rgm16:09:27

argh, think I’ve got it

rgm16:09:52

I can see it in -Stree now … 10x was coming in on an alias facepalm

bhauman16:09:07

and there you go?

bhauman16:09:36

and it was requiring cljsjs/react

rgm16:09:58

maybe react-highlight was

rgm16:09:11

ok, adding some excludes and trying again

bhauman16:09:16

yeah all those need to be excluded

bhauman16:09:33

flip-move as well

bhauman16:09:54

wow what a pain

rgm16:09:19

(pro-tip clojure -A:figwheel -Stree and clojure -Stree are not the same ask)

bhauman16:09:56

but also if this happens again if you look in the cljs_deps.js file you will see the dependency tree and you will be able to find how is requiring cljsjc stuff

rgm16:09:01

ohhh, thanks … that’s a good tip

rgm16:09:23

I’m now far enough along in my learning to kind of squint and understand what I’m looking at \o/

bhauman16:09:46

yeah if you search for cljsjs you will see which lib is requiring it

bhauman16:09:03

but yeah this is the hard part

bhauman16:09:32

If you want to experience more pain you could try and get this to work with https://figwheel.org/config-options#npm

bhauman16:09:05

but you’d have to make sure that the exports translate the way you would need them to

rgm16:09:09

progress! Now cljs compilation is falling over on No such namespace: cljsjs.react-highlight

rgm16:09:20

now I think it’s just a foreign-lib naming problem

rgm16:09:52

oh, neat

rgm16:09:05

ha maybe once I get through to the end here

bhauman16:09:14

good luck!

rgm16:09:21

thanks, Bruce!

bhauman16:09:29

no prob 🙂

rgm17:09:41

so one thing that is helping me a ton with figuring out what the right NPM import statement is in that clojurescript-webpack flow is to set up an HTML file that just imports the webpack bundle, and then opening it up the browser and poking the globals in the console.

rgm17:09:03

jic that helps anyone.

rgm17:09:50

victory! I’ve put how to get 10x working as a foreign lib up here https://gist.github.com/rgm/688c24dc3fd1f23ebfc28c511b3898d4 … thanks @bhauman

👍 4