Fork me on GitHub
#clojurescript
<
2019-12-24
>
Binita Bharati10:12:30

Current version of reagent uses react 16.9.0, but, I want to use a different version of react with reagent. My build tool is shadow-cljs. I have so far tried this. Added :dependencies to shadow-cljs.edn :

:dependencies
 [[reagent "0.9.0-rc4" :exclusions [cljsjs/react cljsjs/react-dom]]
 [cljsjs/react-dom "16.12.0-1"]
 [cljsjs/react "16.12.0-1"]] 
My source code @ src/main/frontend/demo1 :
(ns frontend.demo1
  (:require [reagent.core :as reagent]))

(defn run []
   (js/console.log "Hello world!"))
Every time I run a fresh build, react version 16.9.0 gets installed, even though shadow-cljs.edn file excludes it.Build output prints this :
npm install --save --save-exact [email protected] [email protected]
+ [email protected]
+ [email protected]
How can I use a different version of react with reagent ? Thanks !

p-himik10:12:40

npm install step is completely separate from what you have in your shadow-cljs.edn. You don't need the exclusions either. Just install the desired version of React via NPM, and that's it.

Binita Bharati11:12:51

Ok.. actually, I intended to use react-simple-keyboard npm package with clojurescript. It worked fine with React and JSX.But, when I ported the same code to clojurescript (with reagent), it started throwing error. The errors on the browser console looked like syntax errors, something like hiccup syntax of reagent (something like [:> Keyboard] was not being recognized. So, I tried the same syntax with another npm library - react-flip-move that uses react version 16.3.x. There were no issues using it. The code is as below :

(ns bharati.binita.frontend.demo1.virtualkeyboard
  (:require [reagent.core :as reagent]
            [react-simple-keyboard :as Keyboard]
            [react-flip-move :as FlipMove] ))

(def state (reagent/atom {:layoutName "default"
                          :input ""}))

(defn generateVirtualKeybrd []
[:div
   [:input {:value "testinggg"
            :placeholder "Tap on the virtual keyboard to start"
                        }]
        [:> Keyboard {:layoutName "default"}]
 ])


(defn run []
  (reagent/render [generateVirtualKeybrd]
            (js/document.getElementById "root")))
Build happens fine, but I get this error on my browser console.
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `bharati.binita.frontend.demo1.virtualkeyboard.generateVirtualKeybrd`.
    at createFiberFromTypeAndProps (/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:504:389)
    at createFiberFromElement (/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:505:255)
If I replace Keyboard component with FlipMovelike :
[:> FlipMove
   {:duration 750
    :easing "ease-out"}]
the error does not show up on the console. So, I am wondering, if its due to reagent using a lower version of react (16.9.0) and the react-simple-keyboard using a higher version (16.12.0) ?

p-himik13:12:39

Replace [react-simple-keyboard :as Keyboard] with [react-simple-keyboard :default Keyboard].

Binita Bharati08:12:42

@U2FRKM4TW - Thank you! That error got resolved with this change.

👍 4
Binita Bharati08:12:06

Could you tell me what [react-simple-keyboard :default Keyboard] does ?

p-himik08:12:24

All of the different require forms supported by shadow-cljs are here: https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages

sparkofreason18:12:04

Is there any way to dynamically define a data reader so that it will be available to the cljs compiler? I can make it work with data_readers.cljc, tried setting *data-readers* in a clj file that was pulled in with :require-macros, but no luck there.

sparkofreason15:12:00

I think I was able to answer my own question "no". As now seems obvious in retrospect, the cljs reader has to run to parse the code before any require's are processed. data_readers.cljc is read and processed while clojure itself is starting up.