Clojurians Log v2

Is there a way to know if a value if a function or not?

(type #()) gives #object[Function]

is (= (type f) (type #())) the idiomatic way of determining it?

Seems rather expensive needing to create a temp function

have you tried the fn? predicate? (https://cljs.github.io/api/cljs.core/#fnQMARK)

Have just started clojurescript with very basic setups, just to get the syntax. I am using Atom as text editor. Just wanted to ask what's the best setup as a beginner to get hands on clojurescript. I see many options if searched online and get confused. text editors emacs, vim, visual studio, atom. and what is basically fig-wheel, is it necessary right away at beginning!

I would appreciate help debugging a js interop issue I’m having. I’m clearly misunderstanding something pretty basic. I am using the https://vega.github.io/vega/ library within my app. I’m compiling with Figwheel Main with NPM via :auto-bundle. Everything works just fine in dev, but I get an error in my production build when calling Vega methods. Vega is in my package.json and I’m importing it into my ClojureScript source with: [vega :refer [parse View]] . The code that causes the problem is:

(let [view (View. (parse (clj->js spec)) #js {:container (dom-node this)})]
        (.runAsync view)))

(js-invoke view "runAsync")))

Btw, the spec issue I was having above wasn't solved after all. @lilactown fwiw, the specs were in the same namespace, so it's unlikely that this is a namespace ordering problem

Use (.runAsync ^js view).

Ah! Thank you - I knew I had to be missing something basic!

hi, how can i write this into clojurescript?

{({getRootProps, getInputProps}) => (
    <section>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}

using what? reagent?

yes, sorry, Reagent

roughly translated its a function definition that destructures an object argument. we can't do that in CLJS but (fn [^js arg] [:section [:div (.getRootProps arg) ...]]) should do it

i`m trying to implement react-dropzone https://react-dropzone.js.org/: what i want to translate into cjls with reagent:

import React from 'react'
import Dropzone from 'react-dropzone'

<Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
  {({getRootProps, getInputProps}) => (
    <section>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}
</Dropzone>

[:> Dropzone {} (fn [^js arg] [:section [:div (.getRootProps arg) ...]])]

{$$typeof: Symbol(react.forward_ref), displayName: "Dropzone", defaultProps: {…}, propTypes: {…}, render: ƒ}

216 |      [convert-btn app-state]
 217 |      [:> Dropzone {} (fn [^js arg] [:section [:div (.getRootProps arg) ...]])]
----------------------------^---------------------------------------------------
null
IllegalArgumentException: no conversion to symbol
	clojure.core/symbol (core.clj:596)
	clojure.core/symbol (core.clj:589)
	cljs.analyzer/confirm-var-exists (analyzer.cljc:860)
	cljs.analyzer/confirm-var-exists (analyzer.cljc:848)
	cljs.analyzer/confirm-var-exists (analyzer.cljc:851)
	cljs.analyzer/confirm-var-exists (analyzer.cljc:848)
	shadow.build.cljs-hacks/shadow-resolve-var (cljs_hacks.cljc:370)
	shadow.build.cljs-hacks/shadow-resolve-var (cljs_hacks.cljc:148)
	cljs.analyzer/resolve-existing-var (analyzer.cljc:1298)
	cljs.analyzer/resolve-existing-var (analyzer.cljc:1293)
	cljs.analyzer/analyze-symbol (analyzer.cljc:3795)
	cljs.analyzer/analyze-symbol (analyzer.cljc:3759)
	cljs.analyzer/analyze-form (analyzer.cljc:4189)
	cljs.analyzer/analyze-form (analyzer.cljc:4187)
	cljs.analyzer/analyze* (analyzer.cljc:4243)
	cljs.analyzer/analyze* (analyzer.cljc:4235)
	cljs.analyzer/analyze (analyzer.cljc:4263)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4256)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4254)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze-vector/fn--2648/fn--2649 (analyzer.cljc:4027)
	clojure.core/mapv/fn--8445 (core.clj:6912)
	clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
	clojure.core/reduce (core.clj:6827)
	clojure.core/mapv (core.clj:6903)
	clojure.core/mapv (core.clj:6903)
	cljs.analyzer/analyze-vector/fn--2648 (analyzer.cljc:4027)
	cljs.analyzer/analyze-vector (analyzer.cljc:4027)
	cljs.analyzer/analyze-vector (analyzer.cljc:4024)
	cljs.analyzer/analyze-form (analyzer.cljc:4193)
	cljs.analyzer/analyze-form (analyzer.cljc:4187)
	cljs.analyzer/analyze* (analyzer.cljc:4243)
	cljs.analyzer/analyze* (analyzer.cljc:4235)
	cljs.analyzer/analyze (analyzer.cljc:4263)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4256)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4254)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze-vector/fn--2648/fn--2649 (analyzer.cljc:4027)
	clojure.core/mapv/fn--8445 (core.clj:6912)
	clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
	clojure.core/reduce (core.clj:6827)
	clojure.core/mapv (core.clj:6903)
	clojure.core/mapv (core.clj:6903)
	cljs.analyzer/analyze-vector/fn--2648 (analyzer.cljc:4027)
	cljs.analyzer/analyze-vector (analyzer.cljc:4027)
	cljs.analyzer/analyze-vector (analyzer.cljc:4024)
	cljs.analyzer/analyze-form (analyzer.cljc:4193)
	cljs.analyzer/analyze-form (analyzer.cljc:4187)
	cljs.analyzer/analyze* (analyzer.cljc:4243)
	cljs.analyzer/analyze* (analyzer.cljc:4235)
	cljs.analyzer/analyze (analyzer.cljc:4263)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4256)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4254)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/fn--2025 (analyzer.cljc:2276)
	cljs.analyzer/fn--2025 (analyzer.cljc:2272)
	clojure.lang.MultiFn.invoke (MultiFn.java:252)
	cljs.analyzer/analyze-seq* (analyzer.cljc:3974)
	cljs.analyzer/analyze-seq* (analyzer.cljc:3972)
	cljs.analyzer/analyze-seq*-wrap (analyzer.cljc:3979)
	cljs.analyzer/analyze-seq*-wrap (analyzer.cljc:3977)
	cljs.analyzer/analyze-seq (analyzer.cljc:4003)
	cljs.analyzer/analyze-seq (analyzer.cljc:3981)
	cljs.analyzer/analyze-form (analyzer.cljc:4190)
	cljs.analyzer/analyze-form (analyzer.cljc:4187)
	cljs.analyzer/analyze* (analyzer.cljc:4243)
	cljs.analyzer/analyze* (analyzer.cljc:4235)
	cljs.analyzer/analyze (analyzer.cljc:4263)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4256)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze (analyzer.cljc:4254)
	cljs.analyzer/analyze (analyzer.cljc:4246)
	cljs.analyzer/analyze-fn-method-body (analyzer.cljc:2065)

you left the ... in. need to translate the rest.

Code:

[:> Dropzone {} (fn [^js arg] [:section [:div (.getRootProps arg) [:input (.getInputProps arg)] [:p "drag'n drop"]]])]

react-dom.development.js:17118 The above error occurred in the <Dropzone> component:
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <https://fb.me/react-error-boundaries> to learn more about error boundaries.
logCapturedError @ react-dom.development.js:17118
logError @ react-dom.development.js:17154
expirationTime.callback @ react-dom.development.js:18066
commitUpdateEffects @ react-dom.development.js:16434
commitUpdateQueue @ react-dom.development.js:16464
commitAllLifeCycles @ react-dom.development.js:17384
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
commitRoot @ react-dom.development.js:18949
eval @ react-dom.development.js:20419
exports.unstable_runWithPriority @ scheduler.development.js:256
completeRoot @ react-dom.development.js:20418
performWorkOnRoot @ react-dom.development.js:20347
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 3 more frames
shadow.module.main.append.js:4 An error occurred when calling (netdava.homebank.app.core/main)
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
main.js:1672 An error occurred when loading shadow.module.main.append.js
env.evalLoad @ main.js:1672
(anonymous) @ main.js:2485
main.js:1673 Invariant Violation: Objects are not valid as a React child (found: object with keys {ns, name, fqn, _hash, cljs$lang$protocol_mask$partition0$, cljs$lang$protocol_mask$partition1$}). If you meant to render a collection of children, use an array instead.
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter
    at invariant (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:1:441>)
    at throwOnInvalidObjectType (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:173:103>)
    at createChild (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:182:360>)
    at reconcileChildrenIterator (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:195:419>)
    at eval (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:203:513>)
    at reconcileChildren (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:244:169>)
    at updateForwardRef (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:246:397>)
    at beginWork (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:298:352>)
    at performUnitOfWork (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:434:394>)
    at workLoop (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:436:49>)

looks like you are passing a CLJS map when a JS object is expected?

maybe [:> Dropzone #js {} ...] instead of just the {}

checkPropTypes.js:21 Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Dropzone`, expected `function`.
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter
printWarning @ checkPropTypes.js:21
checkPropTypes @ checkPropTypes.js:83
validatePropTypes @ react.development.js:1667
createElementWithValidation @ react.development.js:1756
reagent$impl$template$make_element @ template.cljs:425
reagent$impl$template$native_element @ template.cljs:334
reagent$impl$template$vec_to_elem @ template.cljs:366
reagent$impl$template$as_element @ template.cljs:385
eval @ template.cljs:427
eval @ core.cljs:5666
eval @ core.cljs:5666
eval @ core.cljs:5670
cljs$core$_kv_reduce @ core.cljs:713
cljs$core$reduce_kv @ core.cljs:2578
reagent$impl$template$make_element @ template.cljs:425
reagent$impl$template$native_element @ template.cljs:334
reagent$impl$template$vec_to_elem @ template.cljs:362
reagent$impl$template$as_element @ template.cljs:385
reagent$impl$template$make_element @ template.cljs:422
reagent$impl$template$native_element @ template.cljs:334
reagent$impl$template$vec_to_elem @ template.cljs:362
reagent$impl$template$as_element @ template.cljs:385
reagent$impl$template$make_element @ template.cljs:422
reagent$impl$template$fragment_element @ template.cljs:305
reagent$impl$template$vec_to_elem @ template.cljs:356
reagent$impl$template$as_element @ template.cljs:385
reagent$impl$component$wrap_render @ component.cljs:114
reagent$impl$component$do_render @ component.cljs:141
eval @ component.cljs:164
reagent$ratom$in_context @ ratom.cljs:42
reagent$ratom$deref_capture @ ratom.cljs:55
reagent$ratom$run_in_reaction @ ratom.cljs:537
reagent$impl$component$render @ component.cljs:164
finishClassComponent @ react-dom.development.js:14742
updateClassComponent @ react-dom.development.js:14697
beginWork @ react-dom.development.js:15645
performUnitOfWork @ react-dom.development.js:19313
workLoop @ react-dom.development.js:19353
renderRoot @ react-dom.development.js:19436
performWorkOnRoot @ react-dom.development.js:20343
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 29 more frames
index.js:2 Uncaught TypeError: n is not a function
    at eval (index.js:2)
    at renderWithHooks (react-dom.development.js:12939)
    at updateForwardRef (react-dom.development.js:14458)
    at beginWork (react-dom.development.js:15662)
    at performUnitOfWork (react-dom.development.js:19313)
    at workLoop (react-dom.development.js:19353)
    at HTMLUnknownElement.callCallback (react-dom.development.js:150)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:200)
    at invokeGuardedCallback (react-dom.development.js:257)
    at replayUnitOfWork (react-dom.development.js:18579)
eval @ index.js:2
renderWithHooks @ react-dom.development.js:12939
updateForwardRef @ react-dom.development.js:14458
beginWork @ react-dom.development.js:15662
performUnitOfWork @ react-dom.development.js:19313
workLoop @ react-dom.development.js:19353
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
replayUnitOfWork @ react-dom.development.js:18579
renderRoot @ react-dom.development.js:19469
performWorkOnRoot @ react-dom.development.js:20343
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
react-dom.development.js:17118 The above error occurred in the <Dropzone> component:
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <https://fb.me/react-error-boundaries> to learn more about error boundaries.
logCapturedError @ react-dom.development.js:17118
logError @ react-dom.development.js:17154
expirationTime.callback @ react-dom.development.js:18066
commitUpdateEffects @ react-dom.development.js:16434
commitUpdateQueue @ react-dom.development.js:16464
commitAllLifeCycles @ react-dom.development.js:17384
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
commitRoot @ react-dom.development.js:18949
eval @ react-dom.development.js:20419
exports.unstable_runWithPriority @ scheduler.development.js:256
completeRoot @ react-dom.development.js:20418
performWorkOnRoot @ react-dom.development.js:20347
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 3 more frames
shadow.module.main.append.js:4 An error occurred when calling (netdava.homebank.app.core/main)
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
main.js:1672 An error occurred when loading shadow.module.main.append.js
env.evalLoad @ main.js:1672
(anonymous) @ main.js:2485
main.js:1673 TypeError: n is not a function
    at eval (index.js:2)
    at renderWithHooks (react-dom.development.js:12939)
    at updateForwardRef (react-dom.development.js:14458)
    at beginWork (react-dom.development.js:15662)
    at performUnitOfWork (react-dom.development.js:19313)
    at workLoop (react-dom.development.js:19353)
    at renderRoot (react-dom.development.js:19436)
    at performWorkOnRoot (react-dom.development.js:20343)
    at performWork (react-dom.development.js:20255)
    at requestWork (react-dom.development.js:20229)

it expected a function which you didn't provide? don't know what. maybe the onDrop?

or maybe its reagent messing up

you can try (react/createElement Dropzone nil (fn [^js arg] ...)) instead?

react being (:require ["react" :as react]) in the ns of course

react-dom.development.js:56 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {ns, name, fqn, _hash, cljs$lang$protocol_mask$partition0$, cljs$lang$protocol_mask$partition1$}). If you meant to render a collection of children, use an array instead.
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter
    at invariant (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:1:441>)
    at throwOnInvalidObjectType (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:173:103>)
    at createChild (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:182:360>)
    at reconcileChildrenIterator (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:195:419>)
    at eval (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:203:513>)
    at reconcileChildren (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:244:169>)
    at updateForwardRef (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:246:397>)
    at beginWork (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:298:352>)
    at performUnitOfWork (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:434:394>)
    at workLoop (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:436:49>)
invariant @ react-dom.development.js:56
throwOnInvalidObjectType @ react-dom.development.js:11834
createChild @ react-dom.development.js:12045
reconcileChildrenIterator @ react-dom.development.js:12428
eval @ react-dom.development.js:12604
reconcileChildren @ react-dom.development.js:14403
updateForwardRef @ react-dom.development.js:14475
beginWork @ react-dom.development.js:15662
performUnitOfWork @ react-dom.development.js:19313
workLoop @ react-dom.development.js:19353
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
replayUnitOfWork @ react-dom.development.js:18579
renderRoot @ react-dom.development.js:19469
performWorkOnRoot @ react-dom.development.js:20343
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 5 more frames
react-dom.development.js:17118 The above error occurred in the &lt;Dropzone&gt; component:
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <https://fb.me/react-error-boundaries> to learn more about error boundaries.
logCapturedError @ react-dom.development.js:17118
logError @ react-dom.development.js:17154
expirationTime.callback @ react-dom.development.js:18066
commitUpdateEffects @ react-dom.development.js:16434
commitUpdateQueue @ react-dom.development.js:16464
commitAllLifeCycles @ react-dom.development.js:17384
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
commitRoot @ react-dom.development.js:18949
eval @ react-dom.development.js:20419
exports.unstable_runWithPriority @ scheduler.development.js:256
completeRoot @ react-dom.development.js:20418
performWorkOnRoot @ react-dom.development.js:20347
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 3 more frames
shadow.module.main.append.js:4 An error occurred when calling (netdava.homebank.app.core/main)
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
main.js:1672 An error occurred when loading shadow.module.main.append.js
env.evalLoad @ main.js:1672
(anonymous) @ main.js:2485
main.js:1673 Invariant Violation: Objects are not valid as a React child (found: object with keys {ns, name, fqn, _hash, cljs$lang$protocol_mask$partition0$, cljs$lang$protocol_mask$partition1$}). If you meant to render a collection of children, use an array instead.
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter
    at invariant (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:1:441>)
    at throwOnInvalidObjectType (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:173:103>)
    at createChild (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:182:360>)
    at reconcileChildrenIterator (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:195:419>)
    at eval (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:203:513>)
    at reconcileChildren (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:244:169>)
    at updateForwardRef (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:246:397>)
    at beginWork (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:298:352>)
    at performUnitOfWork (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:434:394>)
    at workLoop (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:436:49>)
env.evalLoad @ main.js:1673
(anonymous) @ main.js:2485

i am using reagent 0.10.0

suppose it might be the return value of the function

so try (fn [arg] (reagent/as-element [:section ...]))

react-dom.development.js:56 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {onKeyDown, onFocus, onBlur, onClick, onDragEnter, onDragOver, onDragLeave, onDrop, ref, tabIndex}). If you meant to render a collection of children, use an array instead.
    in div (created by Dropzone)
    in section (created by Dropzone)
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter
    at invariant (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:1:441>)
    at throwOnInvalidObjectType (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:173:103>)
    at createChild (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:182:360>)
    at reconcileChildrenArray (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:190:1>)
    at eval (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:203:401>)
    at reconcileChildren (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:244:169>)
    at beginWork (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:296:496>)
    at performUnitOfWork (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:434:394>)
    at workLoop (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:436:49>)
    at HTMLUnknownElement.callCallback (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:488:436>)
invariant @ react-dom.development.js:56
throwOnInvalidObjectType @ react-dom.development.js:11834
createChild @ react-dom.development.js:12045
reconcileChildrenArray @ react-dom.development.js:12277
eval @ react-dom.development.js:12600
reconcileChildren @ react-dom.development.js:14403
beginWork @ react-dom.development.js:14864
performUnitOfWork @ react-dom.development.js:19313
workLoop @ react-dom.development.js:19353
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
replayUnitOfWork @ react-dom.development.js:18579
renderRoot @ react-dom.development.js:19469
performWorkOnRoot @ react-dom.development.js:20343
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 4 more frames
react-dom.development.js:17118 The above error occurred in the &lt;div&gt; component:
    in div (created by Dropzone)
    in section (created by Dropzone)
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <https://fb.me/react-error-boundaries> to learn more about error boundaries.
logCapturedError @ react-dom.development.js:17118
logError @ react-dom.development.js:17154
expirationTime.callback @ react-dom.development.js:18066
commitUpdateEffects @ react-dom.development.js:16434
commitUpdateQueue @ react-dom.development.js:16464
commitAllLifeCycles @ react-dom.development.js:17384
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
commitRoot @ react-dom.development.js:18949
eval @ react-dom.development.js:20419
exports.unstable_runWithPriority @ scheduler.development.js:256
completeRoot @ react-dom.development.js:20418
performWorkOnRoot @ react-dom.development.js:20347
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
eval @ react-dom.development.js:21091
unbatchedUpdates @ react-dom.development.js:20460
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21087
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:17
eval @ dom.cljs:41
eval @ dom.cljs:36
netdava$homebank$app$core$render @ core.cljs:26
netdava$homebank$app$core$main @ core.cljs:31
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
Show 3 more frames
shadow.module.main.append.js:4 An error occurred when calling (netdava.homebank.app.core/main)
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:577
env.evalLoad @ main.js:1670
(anonymous) @ main.js:2485
main.js:1672 An error occurred when loading shadow.module.main.append.js
env.evalLoad @ main.js:1672
(anonymous) @ main.js:2485
main.js:1673 Invariant Violation: Objects are not valid as a React child (found: object with keys {onKeyDown, onFocus, onBlur, onClick, onDragEnter, onDragOver, onDragLeave, onDrop, ref, tabIndex}). If you meant to render a collection of children, use an array instead.
    in div (created by Dropzone)
    in section (created by Dropzone)
    in Dropzone (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in div (created by netdava.homebank.app.converter.converter)
    in netdava.homebank.app.converter.converter
    at invariant (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:1:441>)
    at throwOnInvalidObjectType (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:173:103>)
    at createChild (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:182:360>)
    at reconcileChildrenArray (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:190:1>)
    at eval (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:203:401>)
    at reconcileChildren (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:244:169>)
    at beginWork (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:296:496>)
    at performUnitOfWork (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:434:394>)
    at workLoop (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:436:49>)
    at renderRoot (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:439:68>)
env.evalLoad @ main.js:1673
(anonymous) @ main.js:2485

hmm looks like reagent doesn't treat the props as props but as a child

whats the code you have now?

(defn converter [app-state] [:<> [:div.ui.centered.grid.container [:div.column {:style {:max-width 450}} [:h1 "Homebank-OFX"] (js/console.log Dropzone) [:> ui/Form [csv-file-input app-state] [select-iban app-state] [select-currency app-state] [remember-data-checkbox app-state]] [convert-btn app-state] (react/createElement Dropzone nil (fn [^js arg] (r/as-element [:section [:div (.getRootProps arg) [:input (.getInputProps arg)] [:p "drag'n drop"]]]))) ]]])

i copy-paste the entire wrapper, to see where i create Dropzone

try [:> "div" (.getRootProps arg) ...] instead of the [:div ...].

(and again for the [:> "input" ...] in case the error changes)

react-dom.development.js:56 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {onKeyDown, onFocus, onBlur, onClick, onDragEnter, onDragOver, onDragLeave, onDrop, ref, tabIndex}). If you meant to render a collection of children, use an array instead.
    in div (created by Dropzone)
    in section (created by Dropzone).....

yeah that goes beyond my reagent knowledge. I don't know how to make it use the object as props instead of a child. you can always just use react/createElement

(react/createElement Dropzone nil
       (fn [^js arg]
         (react/createElement "section" nil
           (react/createElement "div"
             (.getRootProps arg)
             (react/createElement "input" (.getInputProps arg))
             (react/createElement "p" nil "drag'n drop")))))

not exactly pretty but should work

thank you very much 🙂 for the help and your time

it works

testing

I'm sure there is a way to do this via reagent too. might be worth looking into to make it less ugly 🙂

i like it as it is now, but i also want to learn reagent too, so i will try to find out what's the problem

I'm getting a warning for:

(- (ocall js/d3 "bisect" r x) 1)

WARNING: cljs.core/-, all arguments must be numbers, got [#{js/clj-nil clj-nil} number]

unless the CLJS analyzer knows the return type of d3.bisect statically, which would seem advanced to me

ocall is from [oops.core :refer [oget ocall]]

What are your best tricks to cut out spec from production builds? Right now I'm refactoring all the specs into their own source folder and excluding that in prod

managing via the classpath or by separate project seems fine

Does anyone have any experience on how to get the doo plugin to work with :target :bundle?

Like, it seems to try to run the output in :output-to, but I'd like to tell it to run the output of the npx webpack command.

(Alternatively, does anyone have any recommendations for running tests defined with deftest?/

I have worked on a library that has both a Clojure/Java and ClojureScript flavor of it, with tests written using deftest forms, and run in an automated fashion from the command line, for both flavors. The library is core.rrb-vector, and has no dependence upon running in a browser, so the automated tests are all run in a browser-less JavaScript runtime. Is that of interest to you?

Yes it is.

This is the library? https://github.com/clojure/core.rrb-vector

It is

If you clone it on a Linux or Mac, change to its root directory, and run ./script/sdo test, it should run a short version of the ClojureScript test suite.

Okay cool, thanks.

It requires Node.js to be installed for the JavaScript runtime (not sure whether I have hooks in there to pick a different one or not).

It is I think the only Clojure project I have worked on that has a ClojureScript part to it, so I make no claims that it is a clean/beautiful/recommended/etc. way to execute such tests.

@leif I also have a couple of projects using the cljs-test-runner for deps.edn which uses doo under the hood

OH, I'd also be interested in looking at that.

@leif for example: https://github.com/borkdude/sci/blob/master/script/test/node

Thanks

And it looks like cljs-opts.edn is where you're using doo?

I'm using this tool: https://github.com/Olical/cljs-test-runner which uses doo

Ah, okay, I get it now.

Thanks

If you need to pass some Hiccup to a React component, wrap in in reagent.core/as-element.

Reagent documentation has a lot of React docs and examples.