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?