@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.
or at least get easier
@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.
or you may want to use webpack and postcss-loader?
actually I think what you are going to want is some post build hooks https://figwheel.org/config-options#post-build-hooks
@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 awayI’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?
yes you should be able to use figwheel.main the same way using the -bo flag
Ok, this all looks amazing =)… Well looks like updating figwheel is next on the task list =)…
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?
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]"
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
.
piggiback is a way to start a ClojureScript REPL from a Clojure REPL.
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
(`%BUILDS%` is where the start builds you select at jack in end up.)
I've tried to explain a bit in depth about Calva Jack-in here: https://calva.io/jack-in-guide/
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"]}
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.
I hope I answered at least some of your questions? At least maybe I gave you some starters for understanding this in more depth. 😃
Omg, thank you for your help!! So helpful 😊👍
I love calva btw, has been using it for a while and it has been great!
Awesome. And welcome!
Just tried your test repo again and it worked flawlessly following your new instructions 😄
(Love the bundle support btw, works like a charm!)
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?
looks like slack glitched
smart bundling when ouput-to or npm_deps.js changes is finished finally
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
.@folcon I'm pretty sure that's in clojurescript itself, and was for a while.
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 😕
I was hitting it early when I switched us over to bundle initially
But I used the first stable version, I didn't try the early releases
I saw it with cljs main iirc
Huh cool =)…
Um, if you point index.html at, :final-output-to
live reloading should work right?
nvm, fixed it =)…
I’m assuming optimisations advanced isn’t working? Or if it is, it’s ignoring :final-output-to
Oh, thanks!
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
^{: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}}
@folcon so is your development build working?
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
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…
But at one point the dev certainly was =)…
I’d try to get back to that state, you may need to blow away node_modules and start again
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
)
you should use 1.10.773
I’ve removed all the node modules for the moment =)…
Ahh ok that’s probably a good start…
Right, I’ll be able to try this again in about 30 mins, will let you know how I get on =)…
but also you can just use the :auto-bundle :webpack feature
and change :output-to the directory you want
just to get started
oh but that doesn’t add mode production to the cli
I’ll have to fix that
yeah reach out if you need help
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.
@folcon so yeah its strange that you are experiencing this
wait are you using :optimizations :advanced
?
@folcon for bundling a single artifact you need to use either advanced or simple :optimizations
Also skip :asset-path
yeah so the main thing for the final bundling you need CLJS to output a single file
Cool, give me a few minutes and I’ll report back what’s happening =)…
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}}
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…Yeah this is tough to do over text.
You should make sure that you also delete the resources/public/js/compiled dir as well between runs
just to be safe
you should also try compiling in :simple
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
also perhaps compile the advanced build to a completely different directory than the dev build
also you may have a webpack.config.js that webpack is reading from?
Nope, not setting any webpack.config.js
stuff, I didn’t want to mess around with any settings you might have created…
I’m normally flushing the compiled folder and the node_modules
folder. I’ll try bundling from the command line…
btw this bit is correct right?
:bundle-cmd {:default ["npx" "webpack" "--mode=production" :output-to "-o" :final-output-to]}
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?@folcon yeah so I assumed you had read this
especially https://clojurescript.org/guides/webpack#overriding-foreign-lib
Oh, sorry no. The first thing I saw was the npm guide that you’d written, if that’s necessary info, perhaps link that?
Reading =)…
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…
oh ……!
well thats the problem
I think
or a problem
but it doesn’t seem like it should be a problem
if there is a require(“react”) it’s not using the react cljsjs lib
I don’t know why it would do that if react
isn’t in node_modules
but this is easy enough to fix for now
npm install react react-dom and then exclude the ones in reagent
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
I might try that
but this is a clojurescript problem not a figwheel problem per-se
but I definitely need to understand it because I want the NPM docs to cover this well
well that doesn’t answer what this is coming from?
Module not found: Error: Can't resolve 'xmlhttprequest'
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 =)…
I’m not sure that’s really true, I’m going to check that with reagent right now
I’m not sure that should be happening
Perhaps not, I’m very willing to believe I’ve configured something incorrectly, but I have no idea what…
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/53421896hmmm react-dom-server is intended to be server side
Yea, I can’t find anything in my code =)…
@folcon can you send me your npm_deps.js file?
As in my original one? Ie what works in dev?
yeah that one
Sorry, had to step away for a bit, building it now
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') }
};
ok so react and react-dom should be in there
and the cljsjs libraries need to be excluded
I just confirmed that the :bundle target does not utilize cljsjs libs but does include them so that they are available globally
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
?
you’ll want to do that for advanced for sure
Actually hmmm
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…
yeah there’s more to it
Are you using Rum or Reagent?
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?
Reagent.
and old version of Reagent?
Well I can update, that’s not a blocker, I just wanted to keep the changes minimal while I was doing this =)…
If you have no need to use webpack or a bunch of npm libraries then there is no need to use the bundle target.
but I have found your experience really enlightening
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 =)…
Sorry if I’ve not been much help in all this…
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…
you have been, I appreciate you taking the time to share your experience
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.
Thanks for the help, I’ll have to see if I can figure out some other way of managing this then…
there is an :install-deps
true flag
which will install all the node deps if the cljs library specifies it
you can even do it on the command line
In figwheel-main 0.2.7 you can to clj -m figwheel.main --install-deps
or even clj -m cljs.main --install-deps
that will add the packages that cljs libraries like reagent need if they are specified
Hmm, so the intent is to use :install-deps
as a flag? Perhaps I can put that into my figwheel dev.cljs.edn?
its better on the command line
because it doesn’t slow your compile
reagent has this file https://github.com/reagent-project/reagent/blob/master/src/deps.cljs
Ok, so perhaps do that before I call figwheel dev or advanced? I’ll give that a go now
which specifies its npm dependencies
if your reagent version is old it may not have that file
because this is another peice of the puzzle
if a ClojureScript library uses a js lib by its global value like js/React
then node modules wont work with it
ClojureScript libraries have to use the required ns symbol to reference the js lib
(:require [react])
then react/createElement
not js/React.createElement
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!
the (:require [react])
syntax works for cljsjs and npm deps
unfortunately this is all implicit knowledge and really needs to be recorded somewhere in the docs
That’s true
But as libraries improve and the eco-system adjusts this should all be pretty seemless
but until then …
Definitely, I appreciated all the help. I’ve got a string to pull on.
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…
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 =)…update clojurescript version
to 773
But thanks for all the help and time you’ve taken! I really appreciated it =)…
It is currently?
I not with that error
At least the deps are, just trying the :install-deps
you suggested =)…
Hmm, ok so I’ll pull the deps tree and see if something is overriding
install-deps has that error in the previous version of clojurescript not the current one
so that’s strange to me
BTW the behavior around ignoring cljsjs files is apparently a bug
Oh? Cool, so we might get a fix =)…
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 >_<…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')
@folcon that one should be OK
Ok, will continue digging =)…
you should see a require(‘xmlhttprequest’)
are you using :simple instead of :advanced?
that should make it easier
also you can use :pretty-print true
in your compiler options
along with :simple it should make it easy to find
I created that JIRA and we’ve beentalking about this in #cljs-dev
Thanks for the heads up =)… Trying with simple
assuming I’m passing the flag correctly ;)…
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;
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)))
Right getting somewhere =)…
I don’t really understand why this is true?
(= cljs.core/*target* "nodejs")
Surely *target*
should be "bundle"
?yeah its complicated
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)))
in clojurescript?
Thats in cljs-ajax
https://github.com/JulianBirch/cljs-ajax/blob/master/src/ajax/xml_http_request.cljs#L29
yep
I just posted a question about to david
Yea, sorry was hunting the line number for you =)…
this is a good find, and obviously doesn’t work
do you use cljs-ajax directly?
oh you can probably set that in closure-defines [“cljs.core/target” nil]
or “browser”
No, I use https://github.com/day8/re-frame-http-fx
I’ll try browser (`cljs.core/target "browser"`) now...
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'
oh yeah that won’t fix it because the require is actually in the code and the bundler is trying to replace it
Oh, fair enough =)…
if you do a clojure -Stree can you see which library is requiring cljs-ajax
Oh, I thought I mentioned it, it’s day8.re-frame/http-fx
you need a webpack.config.js
and you need a resolve {alias {‘xmlhttprequest’ false}} in it
along with the closure-define 🙂
Reading =)…
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 >_<…geez
I think this is a webpack 5 only feature, so testing installing webpack@next
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…
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
.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 npmok 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
.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…yes you probably have more exclusions to do
clojure -Stree will tell you if you are pulling in react or react-dom
also added some infor to cljs-ajax here https://github.com/JulianBirch/cljs-ajax/issues/247
but until this https://clojure.atlassian.net/browse/CLJS-3258 is fixed its going to be hard to have cljsjs libs in :bundle
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…
you can call lein run -m figwheel.main -- --install-deps
Ok, for the first time it has worked!
Now to see how reproducible it is…
WOW!
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…
That was 5 days by my count :P…
Ok, perhaps spoke too soon, looks like it doesn’t like optimisations advanced…
Fixed that, let’s see if it works =)…
Done! Looks a bit more complicated than before, but manageable I think, and hopefully when that bug gets fixed it will become simpler again =)…
Thanks for hanging in there
No problem =)…
Thanks for all the help ^_^…
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
@folcon ^
Ok, I don’t think I’m setting that… Or is the default true?
the default is true
ok cool, good to know =)…
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
@folcon actually this is confusing because figwheel.main defaults aot-cache to false
you don’t have to set :install-deps true, you should just use the --install-deps command line
Cool, what about things like:
cljs.core/*global* "window"
Though I think this is probably going to stick around it seems :)…yeah it should stay, although you can experiment and remove it, it may not affect your build
=)… I’ll experiment on Monday ;)…