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

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

{:source-paths
 ["src/cljs"
  "src/js"]
...

(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!))

import React from "react";

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

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

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

but whats the issue? 😛

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

TypeError: Cannot read property 'createElement' of undefined

React is not loaded properly somehow.

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

should be import * as React from "react"

commonjs <-> ESM interop is weird

voila, it works.

Thanks.

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

But have no idea how those really work.

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

oh, ok. didnt know that

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 😛

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

Thanks. :hugging_face:

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

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

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

(its on by default in recent versions)

check. got that. ... well here look

i'm getting this from a text input

will do more investigating...

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

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

it should be included?

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");

you are using watch I presume?

Not right now.. I'm just compiling.

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

could be that its broken for compile

let me see in watch

Yep.. it works on watch

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

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

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

@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?

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

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

(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)}]]]))

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

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

just happens to be where the script is included 😂

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

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

saying *

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

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

oh, thanks, i was not aware of that

how ought i do that?

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

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

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

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

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

oh

doh

just don't include the script again on the clientside

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

not the case 😄

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

legitas.

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

and unfailing patience

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

I am probably missing something obvious...

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

yes

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

let me double check that part

yes

seems like output?

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

Ah okay

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

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"))
      )))

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

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

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

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

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

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

it's 6.9MB when not a release build

😮

yeah dev builds are huge

hmm so some things are getting renamed...