Fork me on GitHub
#clojurescript
<
2017-03-11
>
andrea.crotti12:03:02

what could be the cause of errors like this: Uncaught Error: goog.require could not find: reagent.dom.server

andrea.crotti12:03:18

somehow I managed to mess up a perfectly working clojurescript project (created with Chestnut)

andrea.crotti12:03:39

and even going back in the git history to something that was working fine, and cleaning up all the compiled files doesn't work

plexus12:03:08

What does lein deps :tree give you?

andrea.crotti12:03:37

quite big actually @plexus

andrea.crotti12:03:59

now the error changed to

interop.cljs?rel=1489229876903:19Uncaught TypeError: Cannot read property 'call' of undefined
    at re_frame$interop$ratom (interop.cljs?rel=1489229876903:19)
    at db.cljc?rel=1489229877862:10
re_frame$interop$ratom @ interop.cljs?rel=1489229876903:19
(anonymous) @ db.cljc?rel=1489229877862:10
hints.cljs?rel=1489229896763:57 GET  404 (Not Found)
devtools$hints$ajax_reader @ hints.cljs?rel=1489229896763:57
devtools$hints$retrieve_javascript_source @ hints.cljs?rel=1489229896763:62
devtools$hints$mark_null_call_site_location @ hints.cljs?rel=1489229896763:83
devtools$hints$make_sense_of_the_error @ hints.cljs?rel=1489229896763:92
devtools$hints$error_object_sense @ hints.cljs?rel=1489229896763:101
devtools$hints$global_error_handler @ hints.cljs?rel=1489229896763:118
data.cljs?rel=1489229877209:4Uncaught TypeError: Cannot read property 'call' of undefined
    at data.cljs?rel=1489229877209:4
(anonymous) @ data.cljs?rel=1489229877209:4
hints.cljs?rel=1489229896763:57 GET  404 (Not Found)
devtools$hints$ajax_reader @ hints.cljs?rel=1489229896763:57
devtools$hints$retrieve_javascript_source @ hints.cljs?rel=1489229896763:62
devtools$hints$mark_null_call_site_location @ hints.cljs?rel=1489229896763:83
devtools$hints$make_sense_of_the_error @ hints.cljs?rel=1489229896763:92
devtools$hints$error_object_sense @ hints.cljs?rel=1489229896763:101
devtools$hints$global_error_handler @ hints.cljs?rel=1489229896763:118
ui.cljs?rel=1489229877478:44Uncaught TypeError: Cannot read property 'call' of undefined
    at ui.cljs?rel=1489229877478:44
(anonymous) @ ui.cljs?rel=1489229877478:44
core.cljs:281Uncaught Error: No protocol method IDeref.-deref defined for type undefined: 
    at Object.cljs$core$missing_protocol [as missing_protocol] (core.cljs:281)
    at Object.cljs$core$_deref [as _deref] (core.cljs:582)
    at cljs$core$deref (core.cljs:1360)
    at re_frame$cofx$db_coeffects_handler (cofx.cljc?rel=1489229878211:62)
    at core.cljs:4903
    at Function.cljs.core.update.cljs$core$IFn$_invoke$arity$3 (core.cljs:4903)
    at cljs$core$update (core.cljs:4897)
    at re_frame$cofx$coeffects_before (cofx.cljc?rel=1489229878211:44)
    at re_frame$interceptor$invoke_interceptor_fn (interceptor.cljc?rel=1489229877779:67)
    at re_frame$interceptor$invoke_interceptors (interceptor.cljc?rel=1489229877779:102)
    at re_frame$interceptor$execute (interceptor.cljc?rel=1489229877779:145)
    at re_frame$events$handle (events.cljc?rel=1489229877950:63)
    at re_frame$router$dispatch_sync (router.cljc?rel=1489229878113:254)
    at Object.scrabble$core$init [as init] (core.cljs?rel=1489229882524:24)
    at (index):11

andrea.crotti12:03:21

an undefined coming out of somewere

plexus12:03:14

That looks like it's coming from the code that calls React. Is js/React defined? (just guessing really)

andrea.crotti12:03:09

I wonder if it's related to the paths since trying to load any file fail in cider

juhoteperi12:03:14

@andrea.crotti The problem is conflicting React versions and React-dom versions from Devcards and Reagent

andrea.crotti12:03:02

how do you normally find out about these issues?

andrea.crotti12:03:10

and I wonder it only happened today

andrea.crotti12:03:15

maybe because I did some clean builds

juhoteperi12:03:49

(Or it is at least quite possible that is the problem, React 15.4 changes the packaging)

juhoteperi12:03:54

Reagent 0.6.1 was released yesterday

andrea.crotti12:03:10

I was also messing around with the :uberjar configuration to get it deployed to Heroku correctly, but that should not affect running locally right?

andrea.crotti12:03:51

tried to remove devcards and downgrade reagent to 0.6.0 to see what happens

andrea.crotti12:03:00

so now I get this

dom.cljs?rel=1489229876728:19Uncaught Error: js/ReactDOM is missing
    at reagent$dom$module (dom.cljs?rel=1489229876728:19)
    at reagent$dom$render_comp (dom.cljs?rel=1489229876728:30)
    at Function.reagent.dom.render.cljs$core$IFn$_invoke$arity$3 (dom.cljs?rel=1489229876728:54)
    at reagent$dom$render (dom.cljs?rel=1489229876728:41)
    at Function.reagent.dom.render.cljs$core$IFn$_invoke$arity$2 (dom.cljs?rel=1489229876728:49)
    at reagent$dom$render (dom.cljs?rel=1489229876728:41)
    at Function.reagent.core.render.cljs$core$IFn$_invoke$arity$2 (core.cljs?rel=1489229876864:72)
    at reagent$core$render (core.cljs?rel=1489229876864:63)
    at re_frisk$core$render_re_frisk (core.cljs?rel=1489229880044:22)

andrea.crotti12:03:10

so re-frisk also didn't like some change of libraries

andrea.crotti12:03:58

back to this error now after disabling re-frisk

andrea.crotti12:03:01

goog.require could not find: reagent.dom.server
goog.logToConsole_ @ base.js:639
goog.require @ base.js:679
(anonymous) @ core.cljs?rel=1489235117837:1
base.js:681Uncaught Error: goog.require could not find: reagent.dom.server
    at Object.goog.require (base.js:681)
    at core.cljs?rel=1489235117837:1

juhoteperi12:03:46

Could still be something with mismatched React versions, I tried React 15.3.1 and React-dom 15.4 on got several errors

andrea.crotti12:03:19

mm now the versions are these for react

[reagent "0.6.0"]
   [cljsjs/react-dom-server "15.2.1-0"]
   [cljsjs/react-dom "15.2.1-0"]
     [cljsjs/react "15.2.1-0"]

andrea.crotti12:03:28

so that should be fine

andrea.crotti12:03:15

but it's not apparently 😄

andrea.crotti12:03:40

if I do however lein cljsbuild dev I get

Caused by: clojure.lang.ExceptionInfo: No such namespace: scrabble.core-test, could not locate scrabble/core_test.cljs, scrabble/core_test.cljc, or Closure namespace "scrabble.core-test" in file src/cljs/scrabble/runner.cljs

andrea.crotti12:03:58

which is something I don't see at all with figwheel in cider for some reason

andrea.crotti12:03:13

but it's probably the root cause of the problem

martinklepsch12:03:33

do you have a file at scrabble/core_test.cljs? note the underscore

andrea.crotti12:03:37

generally in the source paths of cljsbuild I should include also the cljc directories right? :source-paths ["src/cljs" "src/cljc"]?

andrea.crotti12:03:08

actually I don't, only have scrabble/core_test.clj

martinklepsch12:03:34

then you can’t require that namespace in runner.cljs

andrea.crotti12:03:44

that was just for the test profile in cljsbuild and didn't cause issues before though

andrea.crotti12:03:15

now it compiled app.js correctly let's see if it works

andrea.crotti12:03:17

alright different error

Uncaught Error: js/ReactDOM is missing
    at reagent$dom$module (dom.cljs?rel=1489235117536:19)
    at reagent$dom$render_comp (dom.cljs?rel=1489235117536:30)
    at Function.reagent.dom.render.cljs$core$IFn$_invoke$arity$3 (dom.cljs?rel=1489235117536:54)
    at reagent$dom$render (dom.cljs?rel=1489235117536:41)
    at Function.reagent.dom.render.cljs$core$IFn$_invoke$arity$2 (dom.cljs?rel=1489235117536:49)
    at reagent$dom$render (dom.cljs?rel=1489235117536:41)
    at Function.reagent.core.render.cljs$core$IFn$_invoke$arity$2 (core.cljs?rel=1489235117837:73)
    at reagent$core$render (core.cljs?rel=1489235117837:64)
    at scrabble$core$mount_root (core.cljs?rel=1489235251788:20)
    at Object.scrabble$core$init [as init] (core.cljs?rel=1489235251788:26)
    at (index):11

andrea.crotti12:03:43

wait a minute it loaded correctly now

andrea.crotti12:03:51

back to life 😄

juhoteperi12:03:48

If you want to upgrade to latest Reagent, and cljsjs/react dependency from Devcards causes problems, you can just add direct dependency to your project to fix this

andrea.crotti12:03:59

I'm not using devcards anyway for now

juhoteperi12:03:26

... now I wonder if there is any reason for having separate packages for react/-dom/-dom-server, the versions probably have to match always so it might make sense to provide those in one package

andrea.crotti12:03:34

it looks like however that it never does a clean build using cider/figwheel and maybe you have problems and not even notice

andrea.crotti12:03:00

ah well maybe because you might need only one of those things?

juhoteperi12:03:43

Cljs will only include JS files that are required by namespaces in application, so if nothing requires e.g. cljsjs.react-dom-server, the JS file is not included in output

andrea.crotti12:03:31

ah well, btw for this debugging madness restarting the whole thing with Cider with jack-in-clojurescript takes forever

andrea.crotti12:03:40

any faster way?

andrea.crotti12:03:52

maybe running figwheel from the console would be faster in this case?

juhoteperi12:03:09

Re: clean builds, you need to call lein clean to get a clean build, AND if your output-dir is outside of target/ you also need to setup :clean-targets

andrea.crotti12:03:14

now I also have to finally get it all running in Heroku, does anyone have a working :uberjar configuration?

andrea.crotti12:03:49

I was trying with something like this

:uberjar {:hooks [leiningen.cljsbuild]
             :env {:production true}
             :omit-source true
             :aot :all
             :main scrabble.api
             :cljsbuild  {:source-paths ["src/cljs"]}}
but one thing I'm not sure is why repeating again all the cljsbuild config

andrea.crotti12:03:56

since it's already also set below

andrea.crotti12:03:09

or it's normal to repeat it?

andrea.crotti12:03:00

and thanks for the help btw @juhoteperi

andrea.crotti13:03:11

the other thing I don't quite get is that some dependencies (for example re-frisk) where only declared in the dev configuration

andrea.crotti13:03:43

core.cljs was using them only in dev-setup but still requiring the package on top

andrea.crotti13:03:03

should I make these requires optional then or how is it normally done?

tstephens19:03:55

Is there a way to access the “default export” of a JS module written in the commonjs when using foreign libs? The library I’m using defines a default export which is a class I need to instantiate. Assuming I require the module like:

(require [js-lib :as SomeClass])
I can access (SomeClass.staticMethod) but I can’t create an instance of the class like (SomeClass.)

anmonteiro19:03:11

you'll need to wait for the next version

tstephens19:03:47

ahh, ok; thanks. In the meantime, I can use js/SomeClass, right?

anmonteiro19:03:18

I don't know if that will work

tstephens19:03:40

ok, i’ll give it a shot; i guess it depends on how the JS module was implemented, but their docs indicate it should work, anyway

thheller19:03:07

@tstephens js/SomeClass. would assume that there is a global js/SomeClass but there isn't

tstephens19:03:44

well, the module is already compiled, and their docs say they’ve added SomeClass to the window

tstephens19:03:05

should I not be using foreign libs at all in that case? the documentation is a little unclear about that

thheller19:03:47

ah ok if they export to window that works

thheller19:03:01

but exports by default wouldn't do that

thheller19:03:44

ah wait commonjs .. ok that exports to window

tstephens19:03:14

yeah, it’s working for me; thanks for your help thheller and anmonteiro

dominicm21:03:36

How can I access Chartist.Line dynamically, where the Line is provided as a string. I thought to try (aget Chartist "Line") but apparently Chartist isn't an object itself.

darwin22:03:46

(aget js/Chartist "Line”) ?

anmonteiro22:03:42

Also goog.object/get

dominicm22:03:47

I'm not sure I understand why (Chartist.Line. …) works

anmonteiro22:03:57

aget is only meant to be used on arrays

dominicm22:03:11

I have some code to rewrite

dominicm22:03:04

Getting some unexpected behaviour using aget vs goog.object/get, I think it's around incorrect wrapping with new. (new (goog.object/get js/Chartist type) node data)return (new goog.object.get(Chartist,type)(node,data)); <-- this throws. It should probably be (new (goog.object.get(…))(…)) (new (aget js/Chartist type) node data)return (new (Chartist[type])(node,data)); My work around is to do:

(let [x (goog.object/get js/Chartist type)]
        (new x node data))
I'm not sure if/how to report this? Is this expected?

darwin23:03:55

yep, that looks like a bug to me

darwin23:03:20

aget works for you because it is a macro which expands to something which includes outer parens before the new special-form gets its hands on it

sineer23:03:14

Anything else beside http://thi.ng and gamma to do OpenGL/WebGL in cljs? http://Thi.ng looks ok but it's been idle for a while and gamma seems a bit too alpha (very interesting concept too)...