Fork me on GitHub
#figwheel-main
<
2020-05-29
>
ingesol06:05:57

@bhauman Quickly tested 0.2.7-SNAPSHOT. Beautiful stuff, our config is now down from

{:main            our.main
 :target          :bundle
 :parallel-build  true
 :output-to       "our/output/to.js"
 :closure-defines {cljs.core/*global* "window"}
 :bundle-cmd      {:none    ["npx" "webpack" "--mode=development" :output-to "-o" :final-output-to]
                   :default ["npx" "webpack"]}}
to
{:main      our.maain
 :output-to "our/output/to.js"}
Quite a bit of boring and noisy details that went away

😲 8
ingesol06:05:13

I’m assuming you have plans for how advanced compilation should work. Right now we are using plain cljs.main to compile, but should be fine doing it in figwheel right?

bhauman12:05:36

yes you should be able to use figwheel.main the same way using the -bo flag

👍 4
folcon12:05:53

Ok, this all looks amazing =)… Well looks like updating figwheel is next on the task list =)…

jntn12:05:12

I recently switched from shadow-cljs to figwheel-main to try out the new bundle stuff, but I can’t get jack-in to work in vscode with Calva. It just wont connect… Anybody here using Calva and figwheel-main?

pez12:05:08

Not using Fighweel Main currently, but at my last job we did. Also I know Calva very well, so maybe I can help. 😃 Can you describe the steps you take and how it doesn’t work?

jntn05:05:24

Hey! Great to hear from you! I actually tried this example repo from you https://github.com/PEZ/fresh-figwheel-main. I choose jack-in and selected :fig and :build, but then calva just stays in “trying to connect” mode.

pez05:05:44

Oh, I know what is going wrong. Let me add a thing to the README about it. brb

pez06:05:30

There, README updated. You'll see what tripped you up, I hope. I'm sorry about the inconvenience!

jntn06:05:26

I would love to understand more of the source code, maybe you can point me in the direction where this is handled? And I don’t quite understand what role nrepl and piggieback plays.

pez07:05:58

I'm not an expert on nrepl, nor piggieback. But anyway, nrepl is a protocol between a REPL client and the Clojure REPL. Calva is a REPL client, using this protocol. The nREPL needs to be started in the running Clojure application in order for Calva's nREPL client to have anything to connect to, The clojure command has a main argument that can start the nREPL server, if it exists in the dependencies. The command also has arguments to add dependencies that are not present in the deps.edn file. This means that with the right command line Calva gets what it needs, This command line will do the trick in the case of that templated project:

clojure -Sdeps '{:deps {nrepl {:mvn/version "0.6.0"} cider/cider-nrepl {:mvn/version "0.23.0"} clj-kondo {:mvn/version "2020.04.05"} cider/piggieback {:mvn/version "0.4.2"} com.bhauman/figwheel-main {:mvn/version "0.2.3"}}}'  -m nrepl.cmdline --middleware "[cider.nrepl/cider-middleware cider.piggieback/wrap-cljs-repl]" 

pez07:05:41

If you look in the VS Code terminal where the jack-in is launched you will see where I copied it from. 😃 It's the -m nrepl.cmdline that starts the nrepl server. The cider.nrepl/cider-middleware middleware is for enriching the nrepl server with some ops that Calva uses. cider.piggieback/wrap-cljs-repl provides the piggieback cljs-repl.

pez07:05:36

piggiback is a way to start a ClojureScript REPL from a Clojure REPL.

pez07:05:52

It is used by Calva (by proxy of figwheel main) to start its repl. You can see the Clojure code used here: https://github.com/BetterThanTomorrow/calva/blob/master/src/nrepl/connectSequence.ts#L142

pez07:05:05

(`%BUILDS%` is where the start builds you select at jack in end up.)

pez07:05:09

I've tried to explain a bit in depth about Calva Jack-in here: https://calva.io/jack-in-guide/

pez07:05:04

One more thing. The reason why the :fig alias doesn't work with Calva is that Calva can't figure out if the alias has the dependencies and main arguments needed. So in the presence of an alias used Calva builds the commandline using the alias, but doesn't add the -m nrepl.cmdline and middleware. In that project the fig alias looks like so:

:aliases {:fig {:extra-deps
                  {com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}
                   com.bhauman/figwheel-main {:mvn/version "0.1.9"}}
                 :extra-paths ["target" "test"]}

pez07:05:20

And since -m nrepl.cmdline is not there, it won't work. The things that Calva expects should happen doesn't happen and no connection for you.

pez07:05:19

I hope I answered at least some of your questions? At least maybe I gave you some starters for understanding this in more depth. 😃

jntn10:05:05

Omg, thank you for your help!! So helpful 😊👍

❤️ 4
jntn10:05:57

I love calva btw, has been using it for a while and it has been great!

pez11:05:06

Awesome. And welcome!

jntn11:05:18

Just tried your test repo again and it worked flawlessly following your new instructions 😄

calva 4
bsb16:02:35

3 years late to the party, but this thread helped me over a getting started hurdle. Specifically, I used clj-new with https://rigsomelight.com/figwheel-main-template/ and that keeps figwheel in the :fig alias. Adding it to deps finally got me there

jntn12:05:43

(Love the bundle support btw, works like a charm!)

👍 4
bhauman19:05:38

looks like slack glitched

bhauman19:05:32

smart bundling when ouput-to or npm_deps.js changes is finished finally

folcon22:05:08

Not certain when this was introduced?

[Config Error] When using the :bundle target the :output-to file needs to be inside
the directory specified by :output-dir
Was useful to be able to have all the compiled files going to an separate folder so it would only sync the actual app.js.

dominicm22:05:48

@folcon I'm pretty sure that's in clojurescript itself, and was for a while.

folcon22:05:17

Really? That might be the case, but I’ve not noticed it at all up until now, I’m a little worried that I’ve been producing broken builds 😕

dominicm22:05:21

I was hitting it early when I switched us over to bundle initially

dominicm22:05:34

But I used the first stable version, I didn't try the early releases

dominicm22:05:41

I saw it with cljs main iirc

folcon22:05:16

Huh cool =)…

folcon22:05:21

Um, if you point index.html at, :final-output-to live reloading should work right?

folcon22:05:52

nvm, fixed it =)…

folcon23:05:41

I’m assuming optimisations advanced isn’t working? Or if it is, it’s ignoring :final-output-to

folcon00:05:55

Thought I’d figured it out, but no luck, just giving me a list of npm modules to install and installing them doesn’t appear to create a valid build…

folcon00:05:55

^{:final-output-to "resources/public/js/compiled/app.js"
  :open-url            false
  :watch-dirs          ["test" "src"]
  :css-dirs            ["resources/public/css"]}
{:main example.core
 :target :bundle
 :bundle-cmd {:default ["npx" "webpack" "--mode=production" :output-to "-o" :final-output-to]}
 :output-dir           "resources/public/js/compiled/"
 :asset-path           "/js/compiled/"
 :source-map-timestamp true
 :closure-defines {goog.DEBUG false}}
Couldn’t get further than here, perhaps someone will be more successful than me 😃

bhauman02:05:55

closure-defines needs `

:closure-defines {cljs.core/*global* "window"}}
`

folcon09:05:03

Oh, thanks!

folcon09:05:52

Still seems to be failing on some things?

[Figwheel:SEVERE] Bundling command failed
Hash: f3ef2058a04f2aae0cef
Version: webpack 4.43.0
Time: 45456ms
Built at: 05/30/2020 10:37:27 AM
 1 asset
Entrypoint main = app.js
 [0] (webpack)/buildin/global.js 472 bytes {0} [built]
[31] ./resources/public/js/compiled/main.js 1.14 MiB {0} [built]
[49] (webpack)/buildin/module.js 497 bytes {0} [built]
[55] util (ignored) 15 bytes {0} [built]
[57] util (ignored) 15 bytes {0} [built]
    + 61 hidden modules

ERROR in ./node_modules/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Can't resolve 'child_process' in '/<project-path>/node_modules/xmlhttprequest/lib'
 @ ./node_modules/xmlhttprequest/lib/XMLHttpRequest.js 15:12-36
 @ ./resources/public/js/compiled/main.js

ERROR in ./node_modules/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Can't resolve 'fs' in '/<project-path>/node_modules/xmlhttprequest/lib'
 @ ./node_modules/xmlhttprequest/lib/XMLHttpRequest.js 16:9-22
 @ ./resources/public/js/compiled/main.js
Syntax error (ExceptionInfo) compiling at (/private/var/folders/xl/rkkw077j4xxf827wn82mcp_c0000gn/T/form-init5928516375636353650.clj:1:125).
Bundling command failed
Hash: f3ef2058a04f2aae0cef
Version: webpack 4.43.0
Time: 45456ms
Built at: 05/30/2020 10:37:27 AM
 1 asset
Entrypoint main = app.js
 [0] (webpack)/buildin/global.js 472 bytes {0} [built]
[31] ./resources/public/js/compiled/main.js 1.14 MiB {0} [built]
[49] (webpack)/buildin/module.js 497 bytes {0} [built]
[55] util (ignored) 15 bytes {0} [built]
[57] util (ignored) 15 bytes {0} [built]
    + 61 hidden modules

ERROR in ./node_modules/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Can't resolve 'child_process' in '/<project-path>/node_modules/xmlhttprequest/lib'
 @ ./node_modules/xmlhttprequest/lib/XMLHttpRequest.js 15:12-36
 @ ./resources/public/js/compiled/main.js

ERROR in ./node_modules/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Can't resolve 'fs' in '/<project-path>/node_modules/xmlhttprequest/lib'
 @ ./node_modules/xmlhttprequest/lib/XMLHttpRequest.js 16:9-22
 @ ./resources/public/js/compiled/main.js

folcon09:05:55

^{:final-output-to "resources/public/js/compiled/app.js"
  :open-url            false
  :watch-dirs          ["test" "src"]
  :css-dirs            ["resources/public/css"]}
{:main example.core
 :target :bundle
 :bundle-cmd {:default ["npx" "webpack" "--mode=production" :output-to "-o" :final-output-to]}
 :output-dir           "resources/public/js/compiled/"
 :asset-path           "/js/compiled/"
 :source-map-timestamp true
 :devcards             true
 :closure-defines {cljs.core/*global* "window"
                   goog.DEBUG false}}

bhauman12:05:21

@folcon so is your development build working?

bhauman12:05:35

because the bundling isn’t working based on either the way you are requiring “fs” or “child_process”, or some other reason it can’t resolve them

folcon12:05:52

Somewhat? I got it working at one point, but then tried to get prod working and so now I suspect it’s not in a great state. I preferably want one consistent way to produce an output that given an index.html file produces: in dev, a file (which in my case is app.js) and a folder which I can just stick on s3. in prod a single app.js which I can also stick on s3 with it’s index.html… I previously achieved this with different dev.cljs.edn and min.cljs.edn to produce a consistent output =)… I don’t believe I require those libs at all, a library I use might…

folcon12:05:42

But at one point the dev certainly was =)…

bhauman12:05:43

I’d try to get back to that state, you may need to blow away node_modules and start again

folcon12:05:10

I’ve been fiddling with the cljs version to see if that’s the problem, not quite certain which version I need… (currently on 1.10.764)

bhauman12:05:33

you should use 1.10.773

folcon12:05:34

I’ve removed all the node modules for the moment =)…

folcon12:05:44

Ahh ok that’s probably a good start…

folcon12:05:08

Right, I’ll be able to try this again in about 30 mins, will let you know how I get on =)…

bhauman12:05:20

but also you can just use the :auto-bundle :webpack feature

bhauman12:05:46

and change :output-to the directory you want

bhauman12:05:06

just to get started

bhauman12:05:58

oh but that doesn’t add mode production to the cli

bhauman12:05:36

I’ll have to fix that

bhauman12:05:39

yeah reach out if you need help

4
folcon17:05:11

Something came up, just got back and trying it now. - ok, killed my node_modules, and deleted all the existing js stuff and now rebuilding dev. - dev works it seems, trying min. - nope min still fails… @bhauman Not sure what you mean by :auto-bundle :webpack? Do you mean setting :target :bundle? - Trying again with min, I’ll add all the deps it says are missing, but dev didn’t complain at all… - Nope just fails with the same message as before.

bhauman23:05:22

@folcon so yeah its strange that you are experiencing this

bhauman23:05:16

wait are you using :optimizations :advanced?

bhauman23:05:37

@folcon for bundling a single artifact you need to use either advanced or simple :optimizations

bhauman23:05:01

Also skip :asset-path

bhauman23:05:54

yeah so the main thing for the final bundling you need CLJS to output a single file

folcon23:05:46

Cool, give me a few minutes and I’ll report back what’s happening =)…

folcon00:05:15

Is there some special way I should be setting :optimizations :advanced? All I have is this: my lein alias:

lein run -m figwheel.main -O advanced -bo min
min.cljs.edn:
^{:final-output-to     "resources/public/js/compiled/app.js"
  :open-url            false
  :watch-dirs          ["test" "src"]
  :css-dirs            ["resources/public/css"]}
{:main example.core
 :target :bundle
 :bundle-cmd {:default ["npx" "webpack" "--mode=production" :output-to "-o" :final-output-to]}
 :output-dir           "resources/public/js/compiled/"
 :source-map-timestamp true
 :devcards             true
 :closure-defines {cljs.core/*global* "window"
                   goog.DEBUG false}}

folcon00:05:26

Right, flushed node_modules and reinstalled, and building min. Doesn’t work:

[Figwheel:SEVERE] Bundling command failed
Hash: b732264b26408a237e25
Version: webpack 4.43.0
Time: 39221ms
Built at: 05/31/2020 1:22:58 AM
 1 asset
Entrypoint main = app.js
[7] ./resources/public/js/compiled/main.js 1.14 MiB {0} [built]
[8] (webpack)/buildin/global.js 472 bytes {0} [built]
    + 16 hidden modules

ERROR in ./resources/public/js/compiled/main.js
Module not found: Error: Can't resolve 'react' in '/<project folder>/resources/public/js/compiled'
 @ ./resources/public/js/compiled/main.js 36:82-98 48:101-117 246:78-94
...
Just can’t resolve libs like react, react-dom again… Now devs not working either… Just trying to debug why…

bhauman01:05:46

Yeah this is tough to do over text.

bhauman01:05:23

You should make sure that you also delete the resources/public/js/compiled dir as well between runs

bhauman01:05:29

just to be safe

bhauman01:05:00

you should also try compiling in :simple

bhauman01:05:49

and then bundling from the command line and try to follow the source of the errors, it seems like there is a bad require path or something

bhauman01:05:13

also perhaps compile the advanced build to a completely different directory than the dev build

bhauman01:05:59

also you may have a webpack.config.js that webpack is reading from?

folcon01:05:34

Nope, not setting any webpack.config.js stuff, I didn’t want to mess around with any settings you might have created…

folcon01:05:42

I’m normally flushing the compiled folder and the node_modules folder. I’ll try bundling from the command line…

folcon01:05:17

btw this bit is correct right?

:bundle-cmd {:default ["npx" "webpack" "--mode=production" :output-to "-o" :final-output-to]}

folcon01:05:42

Ok I’m doing this in stages as requested, not really had to debug webpack before, but something interesting, this is the first webpack error:

ERROR in ./resources/public/js/compiled/main.js
Module not found: Error: Can't resolve 'react' in '/<project-folder>/resources/public/js/compiled'
 @ ./resources/public/js/compiled/main.js 36:82-98 48:101-117 246:78-94
It’s caused by multiple places performing:
require("react")
which is as you suggested would be the problem, but the file itself has:
/** @license React v16.3.2
 * react.production.min.js
...
            ;(function(p,h){"object"===typeof exports&&"undefined"!==typeof module?module.exports=h():"function"===typeof define&&define.amd?define(h):p.React=h()})
I read that as it’s being exported as h? I thought that at this point the externs are not supposed to be minified?

bhauman13:05:59

@folcon yeah so I assumed you had read this

folcon13:05:58

Oh, sorry no. The first thing I saw was the npm guide that you’d written, if that’s necessary info, perhaps link that?

folcon13:05:07

Reading =)…

folcon14:05:16

With regards to overriding foreign libs, I’m not actually trying to use the npm react, I’m using another npm lib, but for some reason it’s not using the reagent react lib…

bhauman14:05:55

oh ……!

bhauman14:05:04

well thats the problem

bhauman14:05:43

or a problem

bhauman14:05:14

but it doesn’t seem like it should be a problem

bhauman14:05:53

if there is a require(“react”) it’s not using the react cljsjs lib

bhauman14:05:50

I don’t know why it would do that if react isn’t in node_modules

bhauman14:05:42

but this is easy enough to fix for now

bhauman14:05:22

npm install react react-dom and then exclude the ones in reagent

bhauman14:05:20

but there may be a bug here or something we don’t understand so it might be worth maybe creating a small example of this behavior to verify it

bhauman14:05:25

I might try that

bhauman14:05:58

but this is a clojurescript problem not a figwheel problem per-se

bhauman14:05:23

but I definitely need to understand it because I want the NPM docs to cover this well

folcon14:05:35

well that doesn’t answer what this is coming from?

Module not found: Error: Can't resolve 'xmlhttprequest' 

folcon14:05:02

I mean this system does seem to assume that the user is basically swapping cljs libs for npm ones, but tracking that is not trivial =)…

bhauman15:05:37

I’m not sure that’s really true, I’m going to check that with reagent right now

bhauman15:05:18

I’m not sure that should be happening

folcon16:05:28

Perhaps not, I’m very willing to believe I’ve configured something incorrectly, but I have no idea what…

folcon17:05:14

Found a clue on stackoverflow[0]:

The xmlhttprequest package is meant for server-side JavaScript.
Is there something specifying webpack is targeting server-side instead of the browser? - [0] https://stackoverflow.com/a/53421896

bhauman20:05:59

hmmm react-dom-server is intended to be server side

folcon20:05:37

Yea, I can’t find anything in my code =)…

bhauman13:06:52

@folcon can you send me your npm_deps.js file?

folcon13:06:03

As in my original one? Ie what works in dev?

bhauman13:06:34

yeah that one

folcon15:06:54

Sorry, had to step away for a bit, building it now

folcon15:06:54

webpack.config.js

module.exports = {
    target: 'web',
    entry: './resources/public/js/compiled/out/main.js',
    output: {
        path: __dirname + "/out",
        filename: 'app.js'
    },
    resolve: {
        modules: ['./resources/public/js/compiled/out/', './node_modules']
    }
}
One isn’t being created in min, trying with dev. npm_deps.js
module.exports = {
  npmDeps: {
    "pako": require('pako')  }
};

bhauman15:06:39

ok so react and react-dom should be in there

bhauman15:06:55

and the cljsjs libraries need to be excluded

bhauman15:06:35

I just confirmed that the :bundle target does not utilize cljsjs libs but does include them so that they are available globally

folcon15:06:35

Right, but does that mean that I should audit my cljs libs to work out what npm stuff they’re doing and import them myself and exclude them in deps.edn?

bhauman15:06:13

you’ll want to do that for advanced for sure

bhauman15:06:40

Actually hmmm

folcon15:06:22

That seems like it’s not really handling that? I mean from my reading of the clojurescript announcement we could mix and match this, unless there’s some new command that just tells us what’s being used? I mean library deps can get pretty complicated…

bhauman15:06:57

yeah there’s more to it

bhauman15:06:26

Are you using Rum or Reagent?

folcon15:06:36

Right, but in which case I don’t see the upside of using npm deps? It seems like the cost is taking on the burden of auditing all my libs to work out what they import and then explicitly excluding those and adding the imports myself… I mean at that point why not just write a cljsjs wrapper and skip all the hassle?

bhauman15:06:56

and old version of Reagent?

folcon15:06:27

Well I can update, that’s not a blocker, I just wanted to keep the changes minimal while I was doing this =)…

bhauman16:06:10

If you have no need to use webpack or a bunch of npm libraries then there is no need to use the bundle target.

bhauman16:06:42

but I have found your experience really enlightening

folcon16:06:32

Right, but I want to just use 1 npm lib, maybe a few more at some point in the future, that’s the target at least =)…

folcon16:06:50

Sorry if I’ve not been much help in all this…

folcon16:06:33

I’m also not quite clear about why the xmlhttprequest error came up as that implies it was building a node target as opposed to a browser one…

bhauman16:06:08

you have been, I appreciate you taking the time to share your experience

folcon16:06:31

One thing I’m wondering is if the expectation is to perform in-depth auditing as you describe, a command to walk the deps and pull out the excludes / npm installs would be invaluable.

folcon16:06:59

Thanks for the help, I’ll have to see if I can figure out some other way of managing this then…

bhauman16:06:07

there is an :install-deps true flag

bhauman16:06:44

which will install all the node deps if the cljs library specifies it

bhauman16:06:52

you can even do it on the command line

bhauman16:06:28

In figwheel-main 0.2.7 you can to clj -m figwheel.main --install-deps

bhauman16:06:45

or even clj -m cljs.main --install-deps

bhauman16:06:29

that will add the packages that cljs libraries like reagent need if they are specified

folcon16:06:48

Hmm, so the intent is to use :install-deps as a flag? Perhaps I can put that into my figwheel dev.cljs.edn?

bhauman16:06:03

its better on the command line

bhauman16:06:29

because it doesn’t slow your compile

folcon16:06:39

Ok, so perhaps do that before I call figwheel dev or advanced? I’ll give that a go now

bhauman16:06:44

which specifies its npm dependencies

bhauman16:06:50

if your reagent version is old it may not have that file

bhauman16:06:04

because this is another peice of the puzzle

bhauman16:06:05

if a ClojureScript library uses a js lib by its global value like js/React then node modules wont work with it

bhauman16:06:49

ClojureScript libraries have to use the required ns symbol to reference the js lib

bhauman16:06:59

(:require [react])

bhauman16:06:10

then react/createElement

bhauman16:06:37

not js/React.createElement

folcon16:06:53

It’s 0.8.1, which isn’t too bad, but fine this is a way I can move forward =)… And that’s good to know, I’ll be needing to write interop libs at some point, so knowing this is really helpful!

bhauman16:06:37

the (:require [react]) syntax works for cljsjs and npm deps

bhauman16:06:12

unfortunately this is all implicit knowledge and really needs to be recorded somewhere in the docs

folcon16:06:36

That’s true

bhauman16:06:22

But as libraries improve and the eco-system adjusts this should all be pretty seemless

bhauman16:06:32

but until then …

folcon16:06:12

Definitely, I appreciated all the help. I’ve got a string to pull on.

folcon16:06:46

I’ll keep this updated if I figure out a fix, as in some sense this is probably a really useful thread for anyone looking at the logs in the future…

folcon16:06:10

Btw, not sure if anything can be done about this?

[Figwheel] Failed to compile build dev in 1.074 seconds.
[Figwheel:WARNING] Compile Exception: contains? not supported on type: java.lang.Boolean  
[Figwheel:SEVERE] contains? not supported on type: java.lang.Boolean
IE: a filename / line number would be helpful =)…

bhauman16:06:25

update clojurescript version

folcon16:06:32

But thanks for all the help and time you’ve taken! I really appreciated it =)…

folcon16:06:47

It is currently?

bhauman16:06:04

I not with that error

folcon16:06:31

At least the deps are, just trying the :install-deps you suggested =)…

folcon16:06:51

Hmm, ok so I’ll pull the deps tree and see if something is overriding

bhauman16:06:07

install-deps has that error in the previous version of clojurescript not the current one

bhauman16:06:10

so that’s strange to me

bhauman16:06:45

BTW the behavior around ignoring cljsjs files is apparently a bug

folcon16:06:46

Oh? Cool, so we might get a fix =)…

folcon16:06:07

Ok, I just did the :install-deps and the react errors went away… There’s just this node module thing:

Module not found: Error: Can't resolve 'xmlhttprequest'
Time to figure out where that’s coming from >_<…

folcon17:06:24

I think I found it? It looks like clojurescript itself is making it in xml_http_request.js?

// Compiled by ClojureScript 1.10.773 {:target :nodejs}
goog.provide('ajax.xml_http_request')

bhauman17:06:02

@folcon that one should be OK

folcon17:06:25

Ok, will continue digging =)…

bhauman17:06:31

you should see a require(‘xmlhttprequest’)

bhauman17:06:57

are you using :simple instead of :advanced?

bhauman17:06:04

that should make it easier

bhauman17:06:58

also you can use :pretty-print true in your compiler options

bhauman17:06:10

along with :simple it should make it easy to find

bhauman17:06:50

I created that JIRA and we’ve beentalking about this in #cljs-dev

folcon17:06:11

Thanks for the heads up =)… Trying with simple assuming I’m passing the flag correctly ;)…

folcon17:06:18

Well this is the offending line:

ajax.xml_http_request.xmlhttprequest=cljs.core._EQ_.call(null,cljs.core._STAR_target_STAR_,"nodejs")?function(){var a=require("xmlhttprequest").XMLHttpRequest;goog.object.set(global,"XMLHttpRequest",a);return a}():window.XMLHttpRequest;ajax.xml_http_request.xmlhttprequest.prototype.ajax$protocols$AjaxImpl$=cljs.core.PROTOCOL_SENTINEL;

folcon17:06:56

So this I think? ajax.xml-http-request:

(def xmlhttprequest
  (if (= cljs.core/*target* "nodejs")
    (let [xmlhttprequest (.-XMLHttpRequest (js/require "xmlhttprequest"))]
      (goog.object/set js/global "XMLHttpRequest" xmlhttprequest)
      xmlhttprequest)
    (.-XMLHttpRequest js/window)))

folcon17:06:26

Right getting somewhere =)…

folcon18:06:55

I don’t really understand why this is true?

(= cljs.core/*target* "nodejs")
Surely *target* should be "bundle"?

bhauman18:06:06

yeah its complicated

bhauman18:06:53

hey where is that code?

(def xmlhttprequest
  (if (= cljs.core/*target* "nodejs")
    (let [xmlhttprequest (.-XMLHttpRequest (js/require "xmlhttprequest"))]
      (goog.object/set js/global "XMLHttpRequest" xmlhttprequest)
      xmlhttprequest)
    (.-XMLHttpRequest js/window)))

bhauman18:06:01

in clojurescript?

bhauman18:06:08

Thats in cljs-ajax

bhauman18:06:13

I just posted a question about to david

folcon18:06:24

Yea, sorry was hunting the line number for you =)…

bhauman18:06:52

this is a good find, and obviously doesn’t work

bhauman18:06:02

do you use cljs-ajax directly?

bhauman18:06:40

oh you can probably set that in closure-defines [“cljs.core/target” nil]

bhauman18:06:53

or “browser”

folcon18:06:44

I’ll try browser (`cljs.core/target "browser"`) now...

folcon18:06:25

Hmm, looks like it’s being set:

cljs.core._STAR_target_STAR_="bundle"
yet:
ajax.xml_http_request.xmlhttprequest=cljs.core._EQ_.call(null,cljs.core._STAR_target_STAR_,"nodejs")?function(){var a=require("xmlhttprequest").XMLHttpRequest;goog.object.set(global,"XMLHttpRequest",a);return a}():XMLHttpRequest;ajax.xml_http_request.xmlhttprequest.prototype.ajax$protocols$AjaxImpl$=cljs.core.PROTOCOL_SENTINEL;
Still gives the error…
Module not found: Error: Can't resolve 'xmlhttprequest'

bhauman18:06:10

oh yeah that won’t fix it because the require is actually in the code and the bundler is trying to replace it

folcon18:06:28

Oh, fair enough =)…

bhauman19:06:51

if you do a clojure -Stree can you see which library is requiring cljs-ajax

folcon19:06:46

Oh, I thought I mentioned it, it’s day8.re-frame/http-fx

bhauman19:06:09

you need a webpack.config.js

bhauman19:06:10

and you need a resolve {alias {‘xmlhttprequest’ false}} in it

bhauman19:06:01

along with the closure-define 🙂

folcon20:06:26

Reading =)…

folcon20:06:56

This is getting silly:

resolve: {
        alias: {'xmlhttprequest': false},
        ...
    }
error:
Bundling command failed
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.resolve.alias['xmlhttprequest'] should be a string.
   -> New request
I’m going to reread these docs >_<…

folcon20:06:59

I think this is a webpack 5 only feature, so testing installing webpack@next

folcon21:06:53

Ok so the upside is that it compiles, the downside is that it’s broken… I’m going to try and work out if updating the deps helps…

folcon21:06:08

Here’s what I have so far on what is required is: webpack.config.js:

module.exports = {
    target: 'web',
    entry: './resources/public/js/compiled/out/main.js',
    output: {
        path: __dirname + "/out",
        filename: 'app.js'
    },
    resolve: {
        alias: {'xmlhttprequest': false},
        modules: ['./resources/public/js/compiled/out/', './node_modules']
    }
}
dev.cljs.edn:
^{:final-output-to "resources/public/js/compiled/app.js"
  :open-url   false
  :watch-dirs ["test" "src"]
  :css-dirs ["resources/public/css"]
  #_#_
  :auto-testing true}
{:main example.core
 :target :bundle
 :bundle-cmd {:none ["npx" "webpack" "--mode=development" :output-to "-o" :final-output-to]}
 :output-dir "resources/public/js/compiled/out"
 :install-deps true
 :npm-deps {"react" "16.8.6"
            "react-dom" "16.8.6"}
 :source-map-timestamp true}
min.cljs.edn:
^{:final-output-to     "resources/public/js/compiled/app.js"
  :open-url            false
  :watch-dirs          ["test" "src"]
  :css-dirs            ["resources/public/css"]}
{:main example.core
 :target :bundle
 :bundle-cmd {:default ["npx" "webpack" "--mode=production" :output-to "-o" :final-output-to]}
 :output-dir           "resources/public/js/compiled/out"
 :source-map-timestamp true
 :devcards             true
 :install-deps true
 :npm-deps {"react" "16.8.6"
            "react-dom" "16.8.6"}
 :closure-defines {cljs.core/*global* "window"
                   cljs.core/*target* "browser"
                   goog.DEBUG false}}
:
{
  "name": "example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "doc": "docs",
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "homepage": "",
  "devDependencies": {
    "webpack": "^5.0.0-beta.16",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "pako": "^1.0.11"
  }
}
Profile :dev deps:
[com.bhauman/figwheel-main "0.2.7-SNAPSHOT"]
[com.bhauman/rebel-readline-cljs "0.1.4"]
To build dev:
lein run -m figwheel.main -b dev -r --install-deps
To build min:
lein run -m figwheel.main -O advanced -bo min
Notes: Use resolve.alias module-name false in webpack.config.js, ie:
resolve: {alias: {'xmlhttprequest': false}}
To elide a module from webpack that’s being mistakenly added. If it should be added, but it’s not in being added because it’s a dep in a cljsjs lib for example use either :install-deps true or add --install-deps to the figwheel.main command as shown to add it. Can’t seem to add --install-deps to the min lein run command, but this can be worked around by adding it into min.cljs.edn.

folcon21:06:02

One of the problems is coming from:

cljsjs/react-transition-group
Which is interesting, going to try what you mentioned earlier to pull it straight from npm

folcon21:06:17

ok so react works as stated, but react-transition-group does not…

cljs.user=> (require '[cljsjs.react-transition-group])
nil
cljs.user=> js/ReactTransitionGroup
#js {}
cljs.user=> (require '[react-transition-group])
nil
cljs.user=> react-transition-group
nil
cljs.user=> (js-keys react-transition-group)
#js []
this is with :npm-deps:
"react-transition-group" "4.4.1"
and:
[cljsjs/react-transition-group "4.3.0-0"]
Also npm_deps.js does not contain an entry for react-transition-group.

folcon03:06:54

I’ve been spending the past few hours trying to debug where this is coming from:

Uncaught TypeError: Cannot read property 'unstable_cancelCallback' of undefined
As far as I can tell it’s to do with react and react-dom versions, being incompatible, even though they’re currently exactly the same. This seems rather fiddly and exceedingly fragile. I’m also a little worried that the difficultly of this process is making me even more unwilling to update libs when it should be the other way around? I’ll try and see if I can pick this up tomorrow…

bhauman13:06:54

yes you probably have more exclusions to do

bhauman13:06:19

clojure -Stree will tell you if you are pulling in react or react-dom

bhauman14:06:04

but until this https://clojure.atlassian.net/browse/CLJS-3258 is fixed its going to be hard to have cljsjs libs in :bundle

folcon15:06:42

I use deps.edn in new projects, but the code I’m currently in is an old one so it’s all lein based, I’m trying to work out if there’s a lein equivalent to clj -m cljs.main --install-deps --open-url false as calling that without a deps.edn just crashes… Although thinking about it perhaps it’s best to establish that this works before porting everything…

bhauman15:06:08

you can call lein run -m figwheel.main -- --install-deps

😍 4
folcon16:06:29

Ok, for the first time it has worked!

🎉 4
folcon16:06:54

Now to see how reproducible it is…

bhauman17:06:32

WOW!

😄 4
folcon17:06:52

I’ve made some notes as I went, so far it’s looking good, do you want them? If not I’ll probably put together a quick blog post…

folcon17:06:07

That was 5 days by my count :P…

folcon17:06:28

Ok, perhaps spoke too soon, looks like it doesn’t like optimisations advanced…

folcon18:06:38

Fixed that, let’s see if it works =)…

folcon18:06:19

Done! Looks a bit more complicated than before, but manageable I think, and hopefully when that bug gets fixed it will become simpler again =)…

👍 4
bhauman20:06:13

Thanks for hanging in there

folcon22:06:53

No problem =)…

folcon22:06:21

Thanks for all the help ^_^…

bhauman14:06:43

OK more news on this front, you can mix cljsjs libs and node libs, but you have to use :aot-cache false , because libraries like reagent are getting compiled and cached depending on node_modules or cljsjs libs

folcon14:06:08

Ok, I don’t think I’m setting that… Or is the default true?

bhauman14:06:51

the default is true

folcon15:06:35

ok cool, good to know =)…

folcon15:06:56

Ok so with :aot-cache false is that a general rule, or can I now eliminate other flags that are set? like:

:install-deps true

bhauman15:06:03

@folcon actually this is confusing because figwheel.main defaults aot-cache to false

😂 4
bhauman15:06:38

you don’t have to set :install-deps true, you should just use the --install-deps command line

folcon15:06:49

Cool, what about things like:

cljs.core/*global* "window"
Though I think this is probably going to stick around it seems :)…

bhauman16:06:10

yeah it should stay, although you can experiment and remove it, it may not affect your build

folcon20:06:05

=)… I’ll experiment on Monday ;)…