This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-12-24
Channels
- # adventofcode (6)
- # announcements (4)
- # aws (21)
- # babashka (36)
- # beginners (58)
- # calva (3)
- # cider (2)
- # clj-kondo (21)
- # clojars (3)
- # clojure (35)
- # clojure-dev (4)
- # clojure-europe (5)
- # clojure-nl (8)
- # clojure-uk (8)
- # clojuredesign-podcast (7)
- # clojurescript (10)
- # core-async (3)
- # data-science (2)
- # datomic (2)
- # defnpodcast (11)
- # duct (4)
- # figwheel-main (1)
- # fulcro (34)
- # graalvm (12)
- # graphql (4)
- # joker (14)
- # kaocha (1)
- # midje (1)
- # off-topic (5)
- # pedestal (1)
- # re-frame (3)
- # reagent (4)
- # reitit (1)
- # shadow-cljs (4)
- # testing (12)
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 !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.
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 FlipMove
like :
[:> 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) ?Replace [react-simple-keyboard :as Keyboard]
with [react-simple-keyboard :default Keyboard]
.
Could you tell me what [react-simple-keyboard :default Keyboard]
does ?
All of the different require
forms supported by shadow-cljs are here: https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages
Thanks!
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.
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.