Fork me on GitHub
#shadow-cljs
<
2021-08-04
>
zendevil.eth03:08:57

I guess it was because of stream-browserify dependency. After uninstalling it, this is what I get:

The required JS dependency "stream" is not available, it was required by "node_modules/cipher-base/index.js".

Dependency Trace:
	humboi/app.cljs
	humboi/core.cljs
	humboi/events.cljs
	node_modules/@alch/alchemy-web3/dist/cjs/index.js
	node_modules/web3/lib/index.js
	node_modules/web3-eth/lib/index.js
	node_modules/web3-eth-accounts/lib/index.js
	node_modules/crypto-browserify/index.js
	node_modules/create-hash/browser.js
	node_modules/cipher-base/index.js

zendevil.eth04:08:47

and npm i -s stream makes no difference

thheller07:08:02

@ps again. do you have shadow-cljs installed in your project?

thheller07:08:15

please verify by checking <project>/node_modules/shadow-cljs. this should also ensure that <project>/node_modules/node-libs-browser exists?

thheller07:08:18

stream is one of those built-in node packages that needs polyfills for browser builds which should be present if you have shadow-cljs installed in the project

zendevil.eth07:08:29

yes itโ€™s installed:

zendevil.eth07:08:36

[email protected] humboi % ls node_modules/shadow-cljs
README.md	cli		node_modules	package.json

thheller07:08:05

this is again related to the stream-browserify package. did you sort of the version conflict? or which version of shadow-cljs do you use?

zendevil.eth07:08:16

I donโ€™t know what the version conflict is if any

zendevil.eth07:08:07

nevermind it started working after installing and uninstalling a bunch of packages

thheller07:08:32

that usually indicates version conflicts

borkdude07:08:52

I am trying to make React optional for an :esm module, so that the npm installed one will be used instead of using a built-in version of React. I thought I could do this with:

{:deps true
 :builds {:modules {:js-options {:keep-as-import #{"fs" "module" "path"}
                                 :resolve {"react" {:target :global
                                                    :global "React"}
                                           "react-dom" {:target :global
                                                        :global "ReactDOM"}}}
                    :compiler-options {:infer-externs :auto}
                    :target :esm
                    :runtime :node

borkdude07:08:23

but what I'm getting in this case is:

shadow-cljs - failed to load 0
ReferenceError: React is not defined

thheller07:08:01

can't do that in node. there is no global React

thheller07:08:07

just put it in :keep-as-import

thheller07:08:46

:keep-as-import just tells the compiler to not bundle a thing and instead let the runtime import sort it out (so node in your case)

borkdude07:08:54

that's excellent

thheller07:08:34

although that is pretty much going to be trouble in the ESM case

thheller07:08:03

since React only ships commonjs ["react" :as react] might not work, might need to be ["react$default" :as react]

thheller07:08:33

as long as shadow-cljs bundles the commonjs is not a big problem but once it doesn't it might be

borkdude07:08:54

that's fine. it seems it works as is, but I'm getting an advanced compile error.

^

TypeError: d.Sf is not a function
    at x8.$APP.g.flush_render (file:///private/tmp/tbd/out/nbb_reagent.js:44:344)
    at x8.$APP.g.flush_queues (file:///private/tmp/tbd/out/nbb_reagent.js:43:313)
    at x8.$APP.g.run_queues (file:///private/tmp/tbd/out/nbb_reagent.js:43:414)
    at Timeout.a [as _onTimeout] (file:///private/tmp/tbd/out/nbb_reagent.js:43:50)
    at listOnTimeout (node:internal/timers:557:17)
    at processTimers (node:internal/timers:500:7)

thheller07:08:28

looks like externs

thheller07:08:40

try shadow-cljs release thing --pseudo-names or --debug

thheller07:08:53

that'll give you a more accurate names and the externs your are missing

thheller07:08:32

when shadow-cljs doesn't bundle the JS dependencies the externs it usually infers from doing so are also missing

thheller08:08:09

so sometimes needs a hand. usually just a few words in https://shadow-cljs.github.io/docs/UsersGuide.html#_simplified_externs is enough

borkdude08:08:34

with --debug it started working ...

borkdude08:08:04

I'll try --pseudo-names as well

thheller08:08:21

debug is just :pseudo-names true and :source-map true? that shouldn't affect externs related things

borkdude08:08:34

also works...

borkdude08:08:41

can't help it :)

thheller08:08:42

I mean it still renames stuff

thheller08:08:07

well you'll still need to figure it out. don't shit pseudo-named output ๐Ÿ˜›

borkdude08:08:12

That does seem to have done the trick. I have put nbb/externs.txt with:

componentQueue
and now it works...

borkdude08:08:37

What's the best practice on source maps? The source maps in my project are way bigger than the sources itself. I guess I should remove them when publishing the package?

borkdude08:08:09

I don't even know why these source maps are being created

borkdude09:08:03

hmm, it seems when depending on a keep-as-import-ed "react", it won't use a local react. $ nbb ink-demo.cljs

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'react' imported from /usr/local/lib/node_modules/nbb/out/nbb_reagent.js
Perhaps I should just split out the reagent module into a separate npm package and just depend directly on react there, without keep-as-import.

borkdude09:08:12

(since the reagent module is 'required' using import, it doesn't use the createRequire-ed logic, and I haven't found out a way to fix this yet)

borkdude11:08:53

I tried dynamic importing react from the script-relative path before dynamic importing reagent itself, but it seems reagent still wants to load react from the nbb installed relative path

borkdude11:08:21

I think the user should be able to install react into the globally installed nbb node-modules, as a choice.

borkdude11:08:31

Perhaps npm supports this

borkdude11:08:22

ok, it seems this works. npm install -g nbb --no-optional now doesn't install react

๐Ÿ‘ 2
borkdude11:08:38

it might be nicer if npm had a finer-grained way of saying: I want only optional dep this and that, but ok

amar18:08:54

Is there a way to watch without live reloading? I'm trying out Pulumi for infrastructure as code and have been successful using compile but that's a longer feedback cycle. When using watch shadow is waiting to make a connection I think via a websocket when I run pulumi up. Looking for a way for watch to only compile the code, not reload.

Ryan Jerue19:08:32

:devtools {:enabled false} on your build does this I think

thheller06:08:36

yeah, that'll disable hot reload and the REPL but still recompile on file change

amar13:08:10

sweet. thanks!

amar14:08:12

i can confirm that works. Thanks @U01GNU0Q0MB and @U05224H0W

๐Ÿ‘ 3
Drew Verlee22:08:37

My goal is to try devcards (or anything like it really), what is setting the compiler-options to devcards doing in this example from the docs?

;; Here is some dev-specific config
   :dev {:compiler-options {:devcards true}}

martinklepsch10:08:05

You can get a live devcards pretty easily with sci which is quite cool. Obviously misses lots of things but I think its promising https://martinklepsch.org/100/interactive-design-system-docs.html

dpsutton22:08:26

devcards stuff all uses a macro that if that compiler option is not set the macro expands to nothing. it's to ensure that your build isn't inflated for production

๐Ÿ‘ 2
dpsutton22:08:34

is the where the compiler env is checked and then is an example usage. there are 24 such checks in that file