shadow-cljs 2023-01-23 | Slack Archive

hifumi12304:01:17

I'm trying to use webpack to handle dynamic imports, following https://github.com/aratare-jp/shadow-cljs-require/tree/solution But I'm getting this in my console

Uncaught TypeError: shadow.js.shim.module$create_react_class is not a function

Relevant parts of the shadow-cljs config:

{:target :browser
 :compiler-options {:output-feature-set :es6}
 :output-dir "public/js"
 :asset-path "js"
 ...
 :js-options {:js-provider    :external
              :external-index "target/index.js"}}

Then I invoke webpack with the following command:

npx webpack --entry ./target/index.js --output-path ./public/js --output-filename libs.js

My index.html has script tags ordered like so

<script src="/js/libs.js"></script>
<script src="/js/main.js"></script>
<script>shadow_cljs_require.core.init();</script>

Yet I get the TypeError above. Why?

hifumi12306:01:50

after closer inspection, it looks like my :asset-path is problematic and I wont be able to do much as a consequence of relative paths from URLs being unsupported

thheller06:01:23

what do you mean unsupported? they work just fine and would not cause the error above?

thheller06:01:55

are you sure main.js is the correct file? you elided the :modules? could be some old file sitting arround?

hifumi12306:01:53

What I mean by relative to the URL is here https://github.com/thheller/shadow-cljs/blob/22c3f41f86a5ba4754eb774da9c03ec91043d897/src/main/shadow/boot/browser.js#L16

hifumi12307:01:19

This is the structure dev tools in firefox are able to see. And nothing seems wrong with my HTML file. Interestingly, another webpack sample project that uses :target :npm-module works flawlessly on my machine, but using :js-provider :external hasnt been able to work

thheller07:01:53

shadow.js.shim.module$create_react_class is not a function this error is NOT from the :js-provider :external build

thheller07:01:05

thats why I said you might have some old files around

thheller07:01:09

or maybe some bad cache

hifumi12307:01:23

I see. I've just deleted all build artifacts and the .shadow-cljs folder. Hopefully this works

thheller07:01:07

I meant bad browser cache

hifumi12307:01:40

Testing in a fresh copy of Chromium. Looks like Firefox does not provide this information whatsoever. This seems to point out the problem

hifumi12307:01:39

Looking at the chunks webpack placed into public/js, I indeed don't see React anywhere in there. That probably explains my issue -- need to make webpack aware of the transitive React dependency (which I find strange because it's in my package-lock.json and node_modules folder)

hifumi12307:01:16

Ok yeah it's definitely me not adding the necessary require() statements. I had to include e.g. (:require ["react" :as react]) in my core.cljs file so that the following can be emitted

ALL["create-react-class"] = require("create-react-class");
ALL["react"] = require("react");
ALL["react-dom"] = require("react-dom");

then running webpack once more produces a libs.js that contains everything core.cljs wants I would've never figured this out if you didn't tell me to ensure browser cache wasn't messing with my build 🙂

thheller09:01:37

you shouldn't need to add any requires? I mean if you use reagent or whatever it would already provide the react require?

hifumi12309:01:32

Well, the version of reagent in the project I cloned is pretty outdated (0.8.0-rc1), and that version seems to want to use CLJSJS React instead of an NPM React

hifumi12309:01:26

https://github.com/reagent-project/reagent/blob/v0.8.0-rc1/project.clj#L11-L12

thheller09:01:26

that shouldn't matter

pez11:01:22

I'm trying to use my webserver over SSL, which works, except that shadow does not want to connect. I've created a keystore and am adding this to the shadow-cljs command line --config-merge '{:ssl "docker/keystore.jks" :password "shadow"}', but it still fails and I get this error in the js console:

WebSocket connection to '' failed:

I'm guessing that it should be wss, but don't understand how to make it so. I note that the config merge seems to do something because when I add it, I get automatically redirected to https, from http, which does not happen without the merged config.

pez14:01:28

Changing the devtools-url to use https like so "https://localhost:9630", changes the error message to say that wss://, but there's no info about how it fails. Can I enable some verbosity somehow?

pez15:01:58

So, config-merge map is now {:ssl {:keystore "<path-to-keystore>" :password "shadow"}}, :face_palm: , but I still don't get it to work...

pez16:01:49

OK. So it seems I can't add this via config-merge like that. If I move it to the shadow-cljs.edn file, it works.

thheller17:01:43

correct, you cannot supply a :ssl config via config-merge.

thheller17:01:08

config-merge only merges into the build config, not global config

pez19:01:46

I'd like to not enforce ssl on other devs on the project. Is there some other way I can achieve that?

thheller19:01:51

not currently no

pez10:01:44

It works fine accessing things without https still, I now notice. It was when I was using the config merge that it started redirecting me to https, :ssl <something> means something else in the build config.

thheller10:01:21

:ssl has no meaning in --config-merge.

thheller10:01:47

if :devtools-url is set that is used. as-is. if not it tries to figure out which url to use from document.location in the client. it only uses ssl if ssl is configured in shadow-cljs

pez10:01:47

Yes, I meant that when I had misunderstood config merge, I tried to provide the ssl params that way, and it caused the browser to redirect http->https. So it means something, it seems.

thheller12:01:56

I very confident that :ssl has no effect in the build config, regardless of if coming from config direct or config-merge. but if you want to setup a repro I'll take a look.

pez13:01:21

I'm pretty sure I was at that point a while, but I don't know how to repro it now.

pez17:01:55

Next question. 😃 I'm accessing the app using my iPhone pointed at the network name for my machine. The app loads and works, but shadow tries to connect to localhost. How can I make it connect to the network name instead?

thheller17:01:28

by default shadow-cljs will try to connect to the document.location.host, so if it connects to localhost you either have configured it to do so via :devtools-url or :use-document-host false in the buidl config

thheller17:01:37

or you are not using :target :browser in the first place?

pez19:01:38

Yes! I had :devtools-url configured. Removing that fixes the issue. Thanks! 🙏

2023-01-23

Channels