Series of Uncaught Type Errors: "xxxx" is not a function in JavaScript compiled from ClojureScript in Brave Browser

Question

I'm following code examples from the book Web Development with Clojure, 3rd Edition. Currently running through the examples for using ClojureScript to create a single page application with Reagent and Ajax. The compiled Javascript runs fine until I try to send data from a form to the server. This is supposed to break, because I haven't added in any of the Ajax code to attach a csrf token to the post request, and the author wants to walk through how the js console can be used for logging in development, but it's not breaking as expected. I should receive something like this:

    error:{:status 403,
      :status-text "Forbidden",
      :failure :error,
      :response "<h1>Invalid anti-forgery token</h1>"}

I've made sure that I'm running up to date on all of my dependencies and plugins. I recently made the switch to Brave to test it out, I like it a lot, but I've run into a few issues like this, and when I test this out in Chrome, it runs correctly (breaks as expected).

This is the code I have in my core.cljs file:

  (:require [reagent.core :as r]
            [ajax.core :refer [GET POST]]))

(defn send-message!
  [fields]
  (POST "/message"
    {:params @fields
     :handler #(.log js/console (str "response:" %))
     :error-handler #(.log js/console (str "error:" %))}))

(defn message-form
  []
  (let [fields (r/atom {})]
    (fn []
      [:div
       [:div.field
        [:label.label {:for :name} "Name"]
        [:input.input
         {:type :text
          :name :name
          :on-change #(swap! fields assoc :name (-> % .-target .-value))
          :value (:name @fields)}]]
       [:div.field
        [:label.label {:for :message} "Message"]
        [:textarea.textarea
         {:name :message
          :value (:message @fields)
          :on-change #(swap! fields assoc :message (-> % .-target .-value))}]]
       [:input.button.is-primary
        {:type :submit
         :on-click #(send-message! fields)
         :value "Comment"}]
       [:p "Name: " (:name @fields)]
       [:p "Message: " (:message @fields)]])))

(defn home
  []
  [:div.content
   [:div.column.is-centered
    [:div.column.is-two-thirds
     [:div.columns
      [:div.column
       [message-form]]]]]])

(r/render [home] (.getElementById js/document "content"))

When I open the page in Brave, I get these two messages upon loading:

undefined
   at log.js:38

Uncaught TypeError: goog.log.getLogger is not a function
   at xhrio.js:249
   (anonymous) @ xhrio.js:249

The Javascript still runs fine, but when I hit the "submit" button, I get these two errors, which I suspect might be in Google's Closure code? Not sure:

    at goog.net.XhrIo.ajax$protocols$AjaxImpl$_js_ajax_request$arity$3 (xhrio.cljs:30)
    at ajax$protocols$_js_ajax_request (protocols.cljc:6)
    at ajax$simple$raw_ajax_request (simple.cljc:64)
    at ajax$simple$ajax_request (simple.cljc:67)
    at ajax$easy$easy_ajax_request (easy.cljc:116)
    at Function.cljs$core$IFn$_invoke$arity$variadic (core.cljc:75)
    at ajax$core$POST (core.cljc:75)
    at guestbook$core$send_message_BANG_ (core.cljs:7)
    at core.cljs:30
    at HTMLUnknownElement.callCallback (react-dom.inc.js:341)
(anonymous) @ xhrio.cljs:30
ajax$protocols$_js_ajax_request @ protocols.cljc:6
ajax$simple$raw_ajax_request @ simple.cljc:64
ajax$simple$ajax_request @ simple.cljc:67
ajax$easy$easy_ajax_request @ easy.cljc:116
(anonymous) @ core.cljc:75
ajax$core$POST @ core.cljc:75
guestbook$core$send_message_BANG_ @ core.cljs:7
(anonymous) @ core.cljs:30
callCallback @ react-dom.inc.js:341
invokeGuardedCallbackDev @ react-dom.inc.js:391
invokeGuardedCallback @ react-dom.inc.js:448
invokeGuardedCallbackAndCatchFirstError @ react-dom.inc.js:462
executeDispatch @ react-dom.inc.js:594
executeDispatchesInOrder @ react-dom.inc.js:616
executeDispatchesAndRelease @ react-dom.inc.js:719
executeDispatchesAndReleaseTopLevel @ react-dom.inc.js:727
forEachAccumulated @ react-dom.inc.js:701
runEventsInBatch @ react-dom.inc.js:744
runExtractedPluginEventsInBatch @ react-dom.inc.js:875
handleTopLevel @ react-dom.inc.js:6026
batchedEventUpdates @ react-dom.inc.js:2342
dispatchEventForPluginEventSystem @ react-dom.inc.js:6121
dispatchEvent @ react-dom.inc.js:6150
unstable_runWithPriority @ react.inc.js:2820
runWithPriority$2 @ react-dom.inc.js:11443
discreteUpdates$1 @ react-dom.inc.js:21810
discreteUpdates @ react-dom.inc.js:2357
dispatchDiscreteEvent @ react-dom.inc.js:6104
react-dom.inc.js:481 

Uncaught TypeError: G__20367.setTimeoutInterval is not a function
    at goog.net.XhrIo.ajax$protocols$AjaxImpl$_js_ajax_request$arity$3 (xhrio.cljs:30)
    at ajax$protocols$_js_ajax_request (protocols.cljc:6)
    at ajax$simple$raw_ajax_request (simple.cljc:64)
    at ajax$simple$ajax_request (simple.cljc:67)
    at ajax$easy$easy_ajax_request (easy.cljc:116)
    at Function.cljs$core$IFn$_invoke$arity$variadic (core.cljc:75)
    at ajax$core$POST (core.cljc:75)
    at guestbook$core$send_message_BANG_ (core.cljs:7)
    at core.cljs:30
    at HTMLUnknownElement.callCallback (react-dom.inc.js:341)
(anonymous) @ xhrio.cljs:30
ajax$protocols$_js_ajax_request @ protocols.cljc:6
ajax$simple$raw_ajax_request @ simple.cljc:64
ajax$simple$ajax_request @ simple.cljc:67
ajax$easy$easy_ajax_request @ easy.cljc:116
(anonymous) @ core.cljc:75
ajax$core$POST @ core.cljc:75
guestbook$core$send_message_BANG_ @ core.cljs:7
(anonymous) @ core.cljs:30
callCallback @ react-dom.inc.js:341
invokeGuardedCallbackDev @ react-dom.inc.js:391
invokeGuardedCallback @ react-dom.inc.js:448
invokeGuardedCallbackAndCatchFirstError @ react-dom.inc.js:462
executeDispatch @ react-dom.inc.js:594
executeDispatchesInOrder @ react-dom.inc.js:616
executeDispatchesAndRelease @ react-dom.inc.js:719
executeDispatchesAndReleaseTopLevel @ react-dom.inc.js:727
forEachAccumulated @ react-dom.inc.js:701
runEventsInBatch @ react-dom.inc.js:744
runExtractedPluginEventsInBatch @ react-dom.inc.js:875
handleTopLevel @ react-dom.inc.js:6026
batchedEventUpdates @ react-dom.inc.js:2342
dispatchEventForPluginEventSystem @ react-dom.inc.js:6121
dispatchEvent @ react-dom.inc.js:6150
unstable_runWithPriority @ react.inc.js:2820
runWithPriority$2 @ react-dom.inc.js:11443
discreteUpdates$1 @ react-dom.inc.js:21810
discreteUpdates @ react-dom.inc.js:2357
dispatchDiscreteEvent @ react-dom.inc.js:6104

Any ideas as to why this runs as expected in Chrome but not in Brave?

`goog.log.getLogger` is a Google Closure class, which appears to not be in the Brave browser. See https://github.com/google/closure-library — Alan Thompson, Sep 17 '19 at 23:55
This looks suspiciously like Brave is blocking part of your app from loading. If you switch to the network tab in the debugger and refresh, do all your javascript files load correctly? — Walton Hoops, Sep 18 '19 at 03:06
@AlanThompson it looks like Brave does have Closure, the errors are being thrown from Closure files. Maybe it doesn't have some of Closures dependencies?? — hrestey, Sep 18 '19 at 15:33
@WaltonHoops the only thing that is coming up on the network side of things is a file called `chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js`. I don't know what this file is for, it looks like it was minified and then pretty printed, so function and var names are utterly useless. My source files seem to be loading fine, they're coming up in the source tab. — hrestey, Sep 18 '19 at 15:34
That's provided by an extension. You should have 20-30 .js files loaded when you refresh the page. Note you have to *first* open the network tab, then refresh the page, by default it doesn't trace network requests. — Walton Hoops, Sep 18 '19 at 19:41
I grabbed the code from the book, loaded the reagent example and removed the CSRF token, and wasn't able to reproduce your issue. I did have one thought, do a `lein clean`, rebuild your cljs then try a refresh of the page ignoring the cache (ctrl + shift + r or command + shift + r depending on mac or pc). Sometimes you can get old versions of parts of your code cached and mixed in with newer versions and that can cause strange issues. This is especially common when changing dependencies. — Walton Hoops, Sep 19 '19 at 04:12
@WaltonHoops I do indeed have a large number of .js files being loaded, including the app.js file that my ClojureScript should be compiling into. `lein clean` and rebuilding doesn't seem to make a difference. Do you know what version of Brave you're running? — hrestey, Sep 19 '19 at 23:17
Version 0.68.132 Chromium: 76.0.3809.132 (Official Build) unknown (64-bit), running on Arch Linux. If you can provide a repo I can try to reproduce, but I have my doubts. I wonder if something is borked with your install specifically. — Walton Hoops, Sep 20 '19 at 01:02
I just updated to see if that had anything to do with it, I'm now on Version 0.68.139 Chromium: 77.0.3865.90 (Official Build) (64-bit) for MacOS, still getting same results. Pretty strange. I think I might post on their community forum, see if I get any answers there. — hrestey, Sep 20 '19 at 04:45
On the Closure side, if you set a breakpoint at log.js:38, you should be able to see what is actually undefined. The second failure is because the first failed. My guess is that a dependency is missing. — John, Sep 23 '19 at 14:55

Series of Uncaught Type Errors: "xxxx" is not a function in JavaScript compiled from ClojureScript in Brave Browser

0 Answers0