Fork me on GitHub
#shadow-cljs
<
2020-07-28
>
lsenjov01:07:15

I'm kinda stumped on an issue. I need to use requirejs on this platform (no getting around it unfortunately), and shadow appears to be having conflicts. Specifically, loading modules with the usual ["namespace" :as something] appears to replace whatever requirejs is loading Any hints/things to look into would be appreciated

lsenjov04:07:50

Turns out it was just the library I was bringing in (nprogress) which seems to load itself globally for some reason. I don't need it. Other libraries are loading fine

timrichardt12:07:47

I am trying to use js code within a shadow-cljs project. shadow-cljs.edn :

{:source-paths
 ["src/cljs"
  "src/js"]
...
From src/cljs/.../core.cljs , I want to render a react component exported from a js file
(ns core
  (:require ["react" :as react]
            ["react-dom" :as react-dom]

            ["/Component.js" :default Example]))


(.log js/console Example)

(defn init! []
  (react-dom/render (Example) (js/document.querySelector "#root")))

(defn reload! []
  (init!))
src/js/Component.js :
import React from "react";

export default function Example() {
  return React.createElement(
    "div",
...

thheller12:07:33

first of all forget about src/cljs and src/js. just put the .js file in the same directory as your CLJS file

thheller12:07:21

just makes this needlessly complex and js files should be namespaced as well

thheller12:07:43

but whats the issue? 😛

timrichardt12:07:24

Ok, i babel them now to the cljs folder, the issue is

TypeError: Cannot read property 'createElement' of undefined

timrichardt12:07:58

React is not loaded properly somehow.

thheller12:07:11

ah ok you are using babel. then a separate source paths makes sense

thheller12:07:23

should be import * as React from "react"

thheller12:07:35

commonjs <-> ESM interop is weird

timrichardt12:07:14

voila, it works.

timrichardt12:07:52

Yes, I have seen that you translate it to commonJS imports.

timrichardt12:07:09

But have no idea how those really work.

thheller12:07:37

its sort of undefined since regular ESM (eg. actual browsers) do not support it at all

timrichardt12:07:54

oh, ok. didnt know that

thheller12:07:12

some tools like webpack or babel just tried to hide it and now we have to deal with the consequences of everything being shit for a while 😛

thheller12:07:38

probably going to take a couple years till more ESM is available

timrichardt12:07:32

Thanks. :hugging_face:

sova-soars-the-sora20:07:23

pretty print true and what's the other one for figuring out what's up with advanced optimizations fuzzing up?

sova-soars-the-sora20:07:30

aha, pseudo-names... or --debug... wish me luck

thheller20:07:08

first step should be turning on externs inference in case it isn't https://shadow-cljs.github.io/docs/UsersGuide.html#infer-externs

thheller20:07:33

(its on by default in recent versions)

sova-soars-the-sora20:07:56

check. got that. ... well here look

sova-soars-the-sora20:07:44

i'm getting this from a text input

sova-soars-the-sora21:07:00

will do more investigating...

thheller21:07:02

that doesn't look like --pseudo-names or --debug?

Jp Soares21:07:08

About the new :target :esm.. Shouldn't it include the shadow.cljs.devtools.client.env.js in the dev compiled outputted esm module? As it uses shadow.cljs.devtools.client.env.module_loaded. I'm always getting the error

Uncaught TypeError: Cannot read property 'module_loaded' of undefined
    at shared.js:91

thheller21:07:16

it should be included?

Jp Soares21:07:53

It doesn't get included in my shared.js file. It's fixed when I include the lines

import "./cljs-runtime/shadow.cljs.devtools.client.env.js";                                                               
SHADOW_ENV.setLoaded("shadow.cljs.devtools.client.env.js");

thheller21:07:40

you are using watch I presume?

Jp Soares21:07:17

Not right now.. I'm just compiling.

Jp Soares21:07:33

But it happened while I was watching, I guess..

thheller21:07:34

could be that its broken for compile

Jp Soares21:07:45

let me see in watch

Jp Soares21:07:45

Yep.. it works on watch

sova-soars-the-sora21:07:11

uhh, invoking --debug in console but not getting --debug results... will try with flag

Jp Soares21:07:28

Hey Thomas.. as you are here reading my messages :face_with_rolling_eyes: I commented in one of your answers here https://clojureverse.org/t/generating-es-modules-browser-deno/6116/10?u=jponline

thheller21:07:42

@sova could be that the error is deep in some already minified npm package? that wouldn't be affected by --debug or --pseudo-names?

thheller21:07:27

@jpsoares106 I don't really understand what you are asking. you want to publish some web components written in CLJS as a npm library to be consumed by JS users?

Jp Soares22:07:36

Yes, exactly, this is one thing..

sova-soars-the-sora21:07:43

o.o i suppose, i'm not using a lot of crazy things... i didn't go out of my way to minify anything

thheller22:07:21

well the screenshot you posted is not from a --debug output build

sova-soars-the-sora22:07:51

(rum/defc user-chat-input < rum/reactive []
 #?(:cljs (let [csrf-token  (.getAttribute (. js/document (getElementById "aft")) "data-aft")
            input-atom (rum/react user-msg-input-atom)]
  [:div.userinputwrap
   [:div.userinputrapp 
   [:form#in {:on-submit (fn [e] (.preventDefault e)
   	                             (.log js/console "send message via sente net event")
   	                             (chsk-send! [:clientsent/chat-msg {:input input-atom :location (js/decodeURI (. (. js/window -location) -pathname))}])
   	                             (reset! user-msg-input-atom "")
   	                             )}
    [:input {:placeholder "submit chat here, be kind"
    									:auto-focus true
    								 :value (rum/react user-msg-input-atom)
             :on-change (fn [e] (do (println (-> e .-target .-value))
  											                       (reset! user-msg-input-atom (-> e .-target .-value))))}]]
   [:script {:src (str "main.js?v" 6)}]]]))

  #?(:clj 
   [:div.userinputwrap
   [:div.userinputrapp 
   [:form#in
    [:input {:placeholder "submit chat here, be kind" :autofocus true}]]
   [:script {:src (str "main.js?v" 6)}]]]))
at a glance can you catch anything egregious ?

sova-soars-the-sora22:07:39

oh i wonder why the --debug build is not showing up q.q

thheller22:07:15

what the heck is this [:script {:src (str "main.js?v" 6)}]?

sova-soars-the-sora22:07:42

just happens to be where the script is included 😂

thheller22:07:03

how does that work? the script is already loaded at that point?

sova-soars-the-sora22:07:43

yeah, but you're it ought not be loaded until all components are loaded?

thheller22:07:06

I don't have a clue what you are doing but loading a script like that looks like an error to me

thheller22:07:24

this is definitely not how you load things ever on the client side

sova-soars-the-sora22:07:36

oh, thanks, i was not aware of that

sova-soars-the-sora22:07:43

how ought i do that?

thheller22:07:12

I do not have a clue what you are doing so I cannot possibly answer that

thheller22:07:27

it looks like you have some server-side code that adds the script tag?

thheller22:07:37

so when the client loads that html it will load the scripts

thheller22:07:48

but then it reaches the point in the code and tries to include the scripts again

thheller22:07:58

but they are already loaded? so just don't load them again?

sova-soars-the-sora22:07:30

just don't include the script again on the clientside

thheller22:07:58

unless you are doing some code-splitting and actually want to lazy load code

sova-soars-the-sora22:07:04

not the case 😄

thheller22:07:19

ok then just remove the [:script ...] for the cljs path

sova-soars-the-sora22:07:39

cljs is still a blurry new landscape to me... thank you for your help

sova-soars-the-sora22:07:46

and unfailing patience

sova-soars-the-sora22:07:35

Hmm... I am using --debug but still getting these minified errors.

sova-soars-the-sora22:07:44

I am probably missing something obvious...

thheller22:07:23

you are doing shadow-cljs release app --debug?

thheller22:07:03

and whatever file that is producing you are loading on the page? not some old file sitting in a different dir or so?

sova-soars-the-sora22:07:17

let me double check that part

sova-soars-the-sora22:07:11

seems like output?

thheller22:07:52

ok that looks like its deep on react-dom code (which is already minified so its not affected by --debug)

thheller22:07:00

its also in hydrate which I have never used so no clue what you are doing

sova-soars-the-sora22:07:50

Not sure what to make of it. Do you spot anything wild in these lines

(let [in-data    (cljs.reader/read-string (.getAttribute (. js/document (getElementById "pcp")) "data-mggs"))
						in-answers (cljs.reader/read-string (.getAttribute (. js/document (getElementById "pcp")) "data-inanswers"))
      page-type  (.getAttribute (. js/document (getElementById "pcp")) "page-type")]
      (println page-type in-data in-answers)


      (reset! indata in-data) ;set storange atoms
      (reset! inansw in-answers)
      
  (if (= "question" page-type) (do (rum/hydrate (question-page @indata @inansw) (.getElementById js/document "rhqp"))
  																																	(rum/hydrate (user-chat-input) (.getElementById js/document "uci"))))

  (if (= "room" page-type)     (do (rum/hydrate (chat-page in-data) (.getElementById js/document "rhcp"))
  																																	(rum/hydrate (user-chat-input) (.getElementById js/document "uci"))
  																																	(scroll-to-bottom)))

  (if (= "allqp" page-type)    (do (rum/hydrate (all-question-page @indata)        
                                                (.getElementById js/document "rhaq"))																																	))

  (if (= "setts" page-type) 
   (let [in-dn (.getAttribute (. js/document (getElementById "ecce")) "data-displayname")]
      (reset! displayname in-dn)
      (.log js/console in-dn)
      (rum/hydrate (rolo-settings @displayname)
      (.getElementById js/document "rhsp"))
      ;(rum/hydrate (user-chat-input) (.getElementById js/document "uci"))
      )))

sova-soars-the-sora22:07:13

a snippet from client.cljs that has the rum/hydrate methods

thheller22:07:41

sorry not a clue. as I said I have never used hydrate.

sova-soars-the-sora22:07:18

no problem. it's just a way to get the clientside to nimbly saddle onto the pre-rendered server html

sova-soars-the-sora22:07:53

it just sucks because the un-optimized version is 2.4MB and it ought be maybe 750k

thheller22:07:35

I know what hydrate is ... I just have never used it so I cannot help you figure out what it needs

thheller22:07:01

it might be trying to look up functions by name or so which doesn't work with :advanced since they are all renamed

sova-soars-the-sora22:07:39

it's 6.9MB when not a release build

thheller22:07:06

yeah dev builds are huge

sova-soars-the-sora22:07:30

hmm so some things are getting renamed...