figwheel-main

figwheel-main http://figwheel.org
bhauman 2020-05-29T00:03:07.028600Z

@just.sultanov I wouldn’t publish anything yet, let me go through some more iterations, because things are going to change probably as I learn more.

bhauman 2020-05-29T00:03:16.028800Z

or at least get easier

bhauman 2020-05-29T00:09:37.029Z

@just.sultanov I’d really like to understand what your hang ups are. Oh I think I understand, yeah you would probably need to run a tailwind watcher separately.

bhauman 2020-05-29T00:16:56.029200Z

or you may want to use webpack and postcss-loader?

bhauman 2020-05-29T00:39:44.029400Z

actually I think what you are going to want is some post build hooks https://figwheel.org/config-options#post-build-hooks

ingesol 2020-05-29T06:31:57.031400Z

@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

😲 2
ingesol 2020-05-29T06:33:13.032700Z

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?

bhauman 2020-05-29T12:24:36.037400Z

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

👍 1
2020-05-29T12:00:53.034400Z

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

jntn 2020-05-29T12:14:12.036800Z

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?

pez 2020-05-30T07:26:58.056100Z

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]" 

pez 2020-05-30T07:32:41.056300Z

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.

pez 2020-05-30T07:33:36.056500Z

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

pez 2020-05-30T07:35:52.056700Z

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

pez 2020-05-30T07:37:05.057Z

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

pez 2020-05-30T07:38:09.057200Z

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

pez 2020-05-30T07:46:04.057500Z

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"]}

pez 2020-05-30T07:47:20.057700Z

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.

pez 2020-05-30T07:50:19.057900Z

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

jntn 2020-05-30T10:16:05.060200Z

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

❤️ 1
jntn 2020-05-30T10:20:57.062900Z

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

pez 2020-05-30T11:01:06.063200Z

Awesome. And welcome!

jntn 2020-05-30T11:54:18.063400Z

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

1
jntn 2020-05-29T12:17:43.037300Z

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

👍 1
pez 2020-05-29T12:41:08.037900Z

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?

bhauman 2020-05-29T19:45:38.039Z

looks like slack glitched

bhauman 2020-05-29T19:53:32.039900Z

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

2020-05-29T22:08:08.041500Z

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.

dominicm 2020-05-29T22:08:48.042100Z

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

2020-05-29T22:11:17.043300Z

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 😕

dominicm 2020-05-29T22:12:21.043800Z

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

dominicm 2020-05-29T22:12:34.044200Z

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

dominicm 2020-05-29T22:12:41.044500Z

I saw it with cljs main iirc

2020-05-29T22:25:16.045100Z

Huh cool =)…

2020-05-29T22:37:21.046Z

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

2020-05-29T22:48:52.046300Z

nvm, fixed it =)…

2020-05-29T23:20:41.046900Z

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

2020-05-30T09:29:03.058300Z

Oh, thanks!

2020-05-30T09:38:52.058900Z

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

2020-05-30T09:40:55.059200Z

^{: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}}

bhauman 2020-05-30T12:35:21.063700Z

@folcon so is your development build working?

bhauman 2020-05-30T12:38:35.064300Z

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

2020-05-30T12:39:52.064500Z

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…

2020-05-30T12:40:42.064700Z

But at one point the dev certainly was =)…

bhauman 2020-05-30T12:41:43.064900Z

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

2020-05-30T12:42:10.065200Z

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)

bhauman 2020-05-30T12:42:33.065400Z

you should use 1.10.773

2020-05-30T12:42:34.065600Z

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

2020-05-30T12:42:44.065800Z

Ahh ok that’s probably a good start…

2020-05-30T12:43:08.066Z

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

bhauman 2020-05-30T12:43:20.066200Z

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

bhauman 2020-05-30T12:43:46.066400Z

and change :output-to the directory you want

bhauman 2020-05-30T12:44:06.066600Z

just to get started

bhauman 2020-05-30T12:44:58.066800Z

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

bhauman 2020-05-30T12:45:36.067Z

I’ll have to fix that

bhauman 2020-05-30T12:47:39.067200Z

yeah reach out if you need help

1
2020-05-30T17:25:11.085700Z

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.

bhauman 2020-05-30T23:49:22.088900Z

@folcon so yeah its strange that you are experiencing this

bhauman 2020-05-30T23:50:16.089100Z

wait are you using :optimizations :advanced?

bhauman 2020-05-30T23:51:37.089400Z

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

bhauman 2020-05-30T23:52:01.089600Z

Also skip :asset-path

bhauman 2020-05-30T23:52:54.089800Z

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

2020-05-30T23:55:46.090500Z

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

2020-05-31T00:04:15.090700Z

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}}

2020-05-31T00:57:26.090900Z

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…

bhauman 2020-05-31T01:10:46.091100Z

Yeah this is tough to do over text.

bhauman 2020-05-31T01:11:23.091300Z

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

bhauman 2020-05-31T01:11:29.091500Z

just to be safe

bhauman 2020-05-31T01:12:00.091700Z

you should also try compiling in :simple

bhauman 2020-05-31T01:12:49.091900Z

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

bhauman 2020-05-31T01:14:13.092200Z

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

bhauman 2020-05-31T01:14:59.092400Z

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

2020-05-31T01:20:34.092700Z

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

2020-05-31T01:21:42.092900Z

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

2020-05-31T01:22:17.093100Z

btw this bit is correct right?

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

2020-05-31T01:56:42.093300Z

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?

bhauman 2020-05-31T13:37:59.093600Z

@folcon yeah so I assumed you had read this

bhauman 2020-05-31T13:38:00.093800Z

https://clojurescript.org/guides/webpack

bhauman 2020-05-31T13:38:18.094Z

especially https://clojurescript.org/guides/webpack#overriding-foreign-lib

2020-05-31T13:38:58.094200Z

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

2020-05-31T13:39:07.094400Z

Reading =)…

2020-05-31T14:07:16.094600Z

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…

bhauman 2020-05-31T14:14:55.094900Z

oh ……!

bhauman 2020-05-31T14:15:04.095100Z

well thats the problem

bhauman 2020-05-31T14:15:19.095300Z

I think

bhauman 2020-05-31T14:15:43.095500Z

or a problem

bhauman 2020-05-31T14:17:14.095700Z

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

bhauman 2020-05-31T14:17:53.095900Z

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

bhauman 2020-05-31T14:18:50.096100Z

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

bhauman 2020-05-31T14:19:42.096400Z

but this is easy enough to fix for now

bhauman 2020-05-31T14:20:22.096600Z

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

bhauman 2020-05-31T14:22:20.096800Z

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

bhauman 2020-05-31T14:22:25.097Z

I might try that

bhauman 2020-05-31T14:22:58.097200Z

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

bhauman 2020-05-31T14:23:23.097400Z

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

2020-05-31T14:26:35.097600Z

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

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

2020-05-31T14:30:02.097800Z

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 =)…

bhauman 2020-05-31T15:48:37.098Z

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

bhauman 2020-05-31T15:50:18.098200Z

I’m not sure that should be happening

2020-05-31T16:07:28.098400Z

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

2020-05-31T17:43:14.098700Z

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

bhauman 2020-05-31T20:12:59.099Z

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

2020-05-31T20:28:37.099200Z

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

bhauman 2020-06-01T13:29:52.102200Z

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

2020-06-01T13:31:03.102400Z

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

bhauman 2020-06-01T13:34:34.102600Z

yeah that one

2020-06-01T15:06:54.102800Z

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

2020-06-01T15:47:54.103Z

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')  }
};

bhauman 2020-06-01T15:49:39.103200Z

ok so react and react-dom should be in there

bhauman 2020-06-01T15:49:55.103400Z

and the cljsjs libraries need to be excluded

bhauman 2020-06-01T15:51:35.103600Z

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

2020-06-01T15:52:35.103800Z

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?

bhauman 2020-06-01T15:53:13.104Z

you’ll want to do that for advanced for sure

bhauman 2020-06-01T15:55:40.104200Z

Actually hmmm

2020-06-01T15:56:22.104400Z

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…

bhauman 2020-06-01T15:56:57.104600Z

yeah there’s more to it

bhauman 2020-06-01T15:58:26.104800Z

Are you using Rum or Reagent?

2020-06-01T15:58:36.105Z

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?

2020-06-01T15:58:44.105200Z

Reagent.

bhauman 2020-06-01T15:58:56.105400Z

and old version of Reagent?

2020-06-01T15:59:27.105600Z

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

bhauman 2020-06-01T16:01:10.105800Z

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

bhauman 2020-06-01T16:01:42.106100Z

but I have found your experience really enlightening

2020-06-01T16:02:32.106300Z

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 =)…

2020-06-01T16:02:50.106500Z

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

2020-06-01T16:04:33.106700Z

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…

bhauman 2020-06-01T16:05:08.106900Z

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

2020-06-01T16:11:31.107100Z

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.

2020-06-01T16:11:59.107300Z

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

bhauman 2020-06-01T16:12:07.107500Z

there is an :install-deps true flag

bhauman 2020-06-01T16:12:44.107700Z

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

bhauman 2020-06-01T16:12:52.107900Z

you can even do it on the command line

bhauman 2020-06-01T16:13:28.108100Z

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

bhauman 2020-06-01T16:13:45.108300Z

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

bhauman 2020-06-01T16:14:29.108500Z

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

2020-06-01T16:14:48.108800Z

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

bhauman 2020-06-01T16:15:03.109Z

its better on the command line

bhauman 2020-06-01T16:15:29.109200Z

because it doesn’t slow your compile

bhauman 2020-06-01T16:16:21.109500Z

reagent has this file https://github.com/reagent-project/reagent/blob/master/src/deps.cljs

2020-06-01T16:16:39.109800Z

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

bhauman 2020-06-01T16:16:44.110Z

which specifies its npm dependencies

bhauman 2020-06-01T16:17:50.110200Z

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

bhauman 2020-06-01T16:18:04.110400Z

because this is another peice of the puzzle

bhauman 2020-06-01T16:19:05.110600Z

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

bhauman 2020-06-01T16:19:49.110800Z

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

bhauman 2020-06-01T16:19:59.111Z

(:require [react])

bhauman 2020-06-01T16:20:10.111200Z

then react/createElement

bhauman 2020-06-01T16:20:37.111400Z

not js/React.createElement

2020-06-01T16:20:53.111600Z

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!

bhauman 2020-06-01T16:21:37.111800Z

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

bhauman 2020-06-01T16:22:12.112Z

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

2020-06-01T16:23:36.112200Z

That’s true

bhauman 2020-06-01T16:24:22.112400Z

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

bhauman 2020-06-01T16:24:32.112600Z

but until then …

2020-06-01T16:25:12.112800Z

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

2020-06-01T16:25:46.113Z

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…

2020-06-01T16:26:10.113200Z

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 =)…

bhauman 2020-06-01T16:26:25.113400Z

update clojurescript version

bhauman 2020-06-01T16:26:27.113600Z

to 773

2020-06-01T16:26:32.113800Z

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

2020-06-01T16:26:47.114Z

It is currently?

bhauman 2020-06-01T16:27:04.114200Z

I not with that error

2020-06-01T16:27:31.114400Z

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

2020-06-01T16:27:51.114600Z

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

bhauman 2020-06-01T16:28:07.114800Z

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

bhauman 2020-06-01T16:29:10.115100Z

so that’s strange to me

bhauman 2020-06-01T16:36:45.115300Z

BTW the behavior around ignoring cljsjs files is apparently a bug

2020-06-01T16:47:46.115500Z

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

2020-06-01T16:54:07.115700Z

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 >_<…

2020-06-01T17:19:24.116100Z

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')

bhauman 2020-06-01T17:25:02.116400Z

@folcon that one should be OK

2020-06-01T17:25:25.116600Z

Ok, will continue digging =)…

bhauman 2020-06-01T17:25:31.116800Z

you should see a require(‘xmlhttprequest’)

bhauman 2020-06-01T17:25:57.117Z

are you using :simple instead of :advanced?

bhauman 2020-06-01T17:26:04.117200Z

that should make it easier

bhauman 2020-06-01T17:26:58.117400Z

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

bhauman 2020-06-01T17:27:10.117600Z

along with :simple it should make it easy to find

bhauman 2020-06-01T17:27:27.117800Z

https://clojure.atlassian.net/browse/CLJS-3258

bhauman 2020-06-01T17:27:50.118Z

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

2020-06-01T17:32:11.118200Z

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

2020-06-01T17:44:18.118400Z

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;

2020-06-01T17:47:56.118600Z

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)))

2020-06-01T17:54:26.118800Z

Right getting somewhere =)…

2020-06-01T18:05:55.119Z

I don’t really understand why this is true?

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

bhauman 2020-06-01T18:12:06.119200Z

yeah its complicated

bhauman 2020-06-01T18:12:53.119400Z

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)))

bhauman 2020-06-01T18:13:01.119600Z

in clojurescript?

bhauman 2020-06-01T18:17:08.119800Z

Thats in cljs-ajax

bhauman 2020-06-01T18:20:02.120300Z

yep

bhauman 2020-06-01T18:20:13.120500Z

I just posted a question about to david

2020-06-01T18:20:24.120700Z

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

bhauman 2020-06-01T18:20:52.120900Z

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

bhauman 2020-06-01T18:21:02.121100Z

do you use cljs-ajax directly?

bhauman 2020-06-01T18:24:40.121300Z

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

bhauman 2020-06-01T18:24:53.121500Z

or “browser”

2020-06-01T18:27:17.121700Z

No, I use https://github.com/day8/re-frame-http-fx

2020-06-01T18:27:44.122Z

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

2020-06-01T18:54:25.122400Z

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'

bhauman 2020-06-01T18:59:10.122600Z

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

2020-06-01T18:59:28.122800Z

Oh, fair enough =)…

bhauman 2020-06-01T19:04:51.123Z

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

2020-06-01T19:21:46.123200Z

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

bhauman 2020-06-01T19:50:09.123400Z

you need a webpack.config.js

bhauman 2020-06-01T19:50:11.123600Z

https://webpack.js.org/configuration/resolve/

bhauman 2020-06-01T19:51:10.124Z

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

bhauman 2020-06-01T19:52:01.124200Z

along with the closure-define 🙂

2020-06-01T20:02:26.124400Z

Reading =)…

2020-06-01T20:20:56.124600Z

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.
   -&gt; New request
I’m going to reread these docs >_<…

bhauman 2020-06-01T20:28:32.124800Z

geez

2020-06-01T20:31:59.125Z

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

2020-06-01T21:06:53.125200Z

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…

2020-06-01T21:07:08.125400Z

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\" &amp;&amp; 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.

2020-06-01T21:09:02.125600Z

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

2020-06-01T21:52:17.125900Z

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

cljs.user=&gt; (require '[cljsjs.react-transition-group])
nil
cljs.user=&gt; js/ReactTransitionGroup
#js {}
cljs.user=&gt; (require '[react-transition-group])
nil
cljs.user=&gt; react-transition-group
nil
cljs.user=&gt; (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.

2020-06-02T03:25:54.126300Z

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…

bhauman 2020-06-02T13:43:54.135900Z

yes you probably have more exclusions to do

bhauman 2020-06-02T13:44:19.136100Z

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

bhauman 2020-06-02T13:44:45.136300Z

also added some infor to cljs-ajax here https://github.com/JulianBirch/cljs-ajax/issues/247

bhauman 2020-06-02T14:20:04.138700Z

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

2020-06-02T15:46:42.139800Z

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…

bhauman 2020-06-02T15:50:08.140Z

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

😍 1
2020-06-02T16:11:29.140300Z

Ok, for the first time it has worked!

🎉 1
2020-06-02T16:11:54.140600Z

Now to see how reproducible it is…

bhauman 2020-06-02T17:38:32.140800Z

WOW!

😄 1
2020-06-02T17:38:52.141Z

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…

2020-06-02T17:39:07.141200Z

That was 5 days by my count :P…

2020-06-02T17:44:28.141500Z

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

2020-06-02T18:02:38.141700Z

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

2020-06-02T18:10:19.141900Z

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

👍 1
bhauman 2020-06-02T20:18:13.144200Z

Thanks for hanging in there

2020-06-02T22:13:53.144400Z

No problem =)…

2020-06-02T22:14:21.144600Z

Thanks for all the help ^_^…

bhauman 2020-06-04T14:35:43.156200Z

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

bhauman 2020-06-04T14:42:33.156500Z

@folcon ^

2020-06-04T14:43:08.156700Z

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

bhauman 2020-06-04T14:43:51.156900Z

the default is true

2020-06-04T15:27:35.157100Z

ok cool, good to know =)…

2020-06-04T15:31:56.157300Z

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

bhauman 2020-06-04T15:38:03.157500Z

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

😂 1
bhauman 2020-06-04T15:38:38.157800Z

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

2020-06-04T15:55:49.158Z

Cool, what about things like:

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

bhauman 2020-06-04T16:41:10.158300Z

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

2020-06-04T20:29:05.158500Z

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