figwheel-main

2022-05-04T09:12:49.194889Z

is there an official recommended way to get cljsjs and bundle/webpack in figwheel main to play nicely? My assumption is that it's important to only have one of everything. So I removed all my cljsjs deps and added them to npm. And i also excluded cljsjs deps from reagent and other projects that pull them in transitively. Then I create cljsjs namespaces by hand, that sets global variables so that i.e. "React" is available globally when someone pulls in cljsjs.react. However, for some reason, the bundled output from figwheel seems to write things so that it's in the wrong order. I.e. a dependency that uses cljsjs.react seems to somehow execute before cljsjs.react is loaded in, and so "React" is undefined. Maybe I should think differently about this?

athomasoriginal 2022-05-04T12:20:10.011019Z

Curious: which deps are available as CLJSJS, but not NPM that youโ€™re interesting in?

2022-05-04T12:20:51.969619Z

I'm going the opposite way actually, I'm getting rid of cljsjs and moving to using npm instead

athomasoriginal 2022-05-04T12:25:25.103449Z

Right, so youโ€™re going dep by dep instead of whole sale change?

2022-05-04T12:26:00.906879Z

yeah, I plan to keep the old versjons of some dependencies I use around for now, and provide cljsjs for backwards compatibility, so I don't have to change the actual code, just the build step

๐Ÿ‘ 1
athomasoriginal 2022-05-04T12:27:34.454589Z

My normal approach has been whole sale change because, from my experience doing this thing, I can just specify the same versions of the NPM packages and things are good. But, depending on the deps this may not be as straightforward? All good. Curiosity satisfied ๐Ÿ™‚

2022-05-04T12:28:31.817629Z

my main issue is a lack of understanding of what's going on and lots of manual trial and error ๐Ÿ˜„ But at least I can narrow it down now - I'm only going to try variants of having all cljsjs dependencies excluded (as mentioned in #figwheel-main)

๐Ÿ‘ 1
2022-05-04T09:14:23.740079Z

https://figwheel.org/docs/npm.html does not mention that you should exclude cljsjs deps so maybe I'm over thinking it ๐Ÿ™‚

2022-05-04T10:39:27.201919Z

tldr: should you make sure to exclude transitive cljsjs dependencies when you combine figwheel main + bundling with webpack + cljsjs?

2022-05-04T11:46:59.895439Z

not entirely sure... but it seems I've ended up in a situation where I have multiple instances of react around

2022-05-04T12:24:23.485249Z

found it! You are indeed supposed to exclude cljsjs dependencies: > When compiling for production we should also, make sure that you arenโ€™t including Cljsjs libraries that are being provided for by NPM libraries. We donโ€™t want to be including libraries twice.

2022-05-04T12:40:54.033369Z

is there any way to tell figwheel/webpack/.... that for the require cljsjs.react-select, it needs to load react and classnames first? I'm using auto bundling

2022-05-04T12:41:35.993439Z

seems like my issue right now is that cljsjs.react-select includes a js file without any goog.require and goog.provide etc, so figwheel/webpack/... has no idea that it needs React to be available, and so I get errors about React being undefined when I run my bundled script

2022-05-04T12:42:07.572549Z

(note that I'm not using cljsjs.react-select from upstream, I'm using a forked version, so maybe something is simply missing from this fork)

2022-05-04T12:58:44.120529Z

I guess that it's a problem that I'm using npm and I've removed all cljsjs deps, except that one cljsjs dep that is an internal fork. So I am in fact still using cljsjs alongside npm

2022-05-04T13:04:02.300439Z

ok... that was it ๐Ÿ˜„ The fact that this was an internally forked module made me blind to the fact that I was including a cljsjs module alongside npm modules. I added the forked module as a npm dependency instead and BOOM it works partyparrotpartyparrotpartyparrotpartyparrot

2022-05-04T13:04:36.541599Z

tldr: when you combine cljsjs with bundling npm modules in figwheel main, remove and exclude all cljsjs dependencies. Everything has to come from package.json.

2022-05-04T13:06:35.495319Z

I believe the issue is that cljsjs modules are missing important goog.require and goog.provide statements, which causes the cljsjs module to be included in the bundle at the wrong location where required modules aren't yet available

2022-05-04T13:12:59.712809Z

</rubber-ducking-session>

1