This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-07-02
Channels
- # babashka (68)
- # beginners (22)
- # calva (8)
- # cider (10)
- # cljs-dev (31)
- # clojure (35)
- # clojure-europe (6)
- # clojure-norway (17)
- # clojurescript (5)
- # conjure (10)
- # data-science (8)
- # datascript (10)
- # emacs (3)
- # fulcro (20)
- # humbleui (3)
- # london-clojurians (1)
- # membrane (9)
- # nbb (34)
- # off-topic (16)
- # pathom (15)
- # releases (1)
- # shadow-cljs (15)
- # sql (11)
I'm having an issue mounting my root on react native. This is the error.
One 2 errors and 2 warnings of a similar theme.
ERROR [com.fulcrologic.fulcro-native.expo-application:54] - Unable to mount/refresh
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
APP
(defonce FULCRO-APP (native-app/fulcro-app
#?(:cljs {:remotes {:remote (net/fulcro-http-remote
{:url "
:clj {})))
ROOT
(defsc Root [this props] 6 references
{:query [{::app/pull-query-data (comp/get-query PullDataDenormalizer)}
{::page/id (comp/get-query DummyPage)}
{::section/id (comp/get-query DummySection)}
{::component/id (comp/get-query DummyComponent)}
::well/id]
:initial-state {; Required so that append to pull-query-data works as expected:
::app/pull-query-data []}}
(ui-view {} (ui-text {} "HUH?")))
INIT
(defn ^:export init [] 0 references
(app-load-function)
(app/mount! FULCRO-APP Root "root")
(log/info (str "*** " APP-NAME " *** Initialized: " (now))))
I have tried the init with (app/mount! FULCRO-APP Root :zilch)
as well.
app/mount! is from com.fulcrologic/fulcro {:mvn/version "3.5.22"}
native-app/fulcro-app is from com.fulcrologic/fulcro-native {:mvn/version "0.0.10"}
Any ideas on what's going wrong would be helpful. I can provide more details, but figured this post is already an eyeful, so if anyone wants to help. CHEERS! I'll provide you with any efforts that will help you help me. 👍💪🦕.
Could you simplify the Root even more? In web I would just return (div {} "hi")
Is your code a native equivalent of this or can it be simplified? From web point of view the code looks fine but that can be the problem - native may be different. Have you got a working example of a Fulcro native app that you could compare to your code?
Hey Jakub! To the best of my knowledge there is no div in react native. ui-view is the as close to the equivalent of div as react native has. I was going off of this library https://github.com/hadils/fulcro-native-template-2 But it's far from a hello world. And it's built on an insanely old version of expo. There isn't a whole lot of precedence for react-native fulcro apps floating around github.
@U036UJBDM5G This reminds me I need to push a pull request to fulcro-native. I don't have time at the moment to test your's out right at the moment; but if you try using https://gist.github.com/SignSpice/ec36103f2f2c04816c6153f3da8b923c instead of [com.fulcrologic.fulcro-native.expo-application :as expo]
it will work if it is the same problem I think it is.
I caught some love using com.fulcrologic.fulcro-native.expo-application-40, this will compile in the browser, but loading on the expo go app produces...
Error: ENOENT: no such file or directory, open '/Users/pat/nd/resources/test/http:/192.168.12.157:19000/build/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false'
at Object.openSync (node:fs:585:3)
at Object.readFileSync (node:fs:453:35)
at getCodeFrame (/Users/pat/nd/resources/test/node_modules/metro/src/Server.js:949:18)
at Server._symbolicate (/Users/pat/nd/resources/test/node_modules/metro/src/Server.js:1022:22)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at Server._processRequest (/Users/pat/nd/resources/test/node_modules/metro/src/Server.js:429:7) {
errno: -2,
syscall: 'open',
code: 'ENOENT',
path: '/Users/pat/nd/resources/test/http:/192.168.12.157:19000/build/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false'
Cross platform development is most certainly on my list. I've got some cool stuff I'm working on, but this is starting to look like a time sink. I'll try out whatever ideas anyone comes up with and post what I did when I finally get it working. It's after hours for me now. It's nice to know someone else is interested in Fulcro on native. With Google, Slack, and Discord not knowing what's causing that error help I'm a little armless baby on this one.
@U013TCGL92T Are you running on Native non-browser?
Yes, that is correct. I have a (last I tried) working basic repo here based off the template: https://github.com/SignSpice/fulcro-real-world
Hmm, I didn't know about the -40 variants before, I'm kinda surprised that isn't the default.
I’ve cloned your repo when I was getting started. That was several recycled attempts ago. I think when I get back to looking at native later this afternoon I’ll give it a go straight and it builds, I’ll port it. I was thinking the ‘expo-app-loading’ library was where my problems lie. I see you aren’t using it. This may just work. I’ll let you know. At the very least, some documentation would be nice. There ain’t a lot of us using native, so I’m glad for your help. Get at me in the future if you run into issues, maybe I’ve had them.
Thanks, I'll keep that in mind! Soon (hopefully this month) I plan to generalize the app I've made and make a public repo out of it. It's the first clojure project I've done and it needs some serious refactoring, but there might be something useful in it. 😛
Is there a reason why everyone is using a separate package.json file? I just did it out of monkey see, but I’m not sure it’s a necessary complication.
Not quite sure what you mean by separate, but there are two of them: one in the parent directory for shadow-cljs, and one in the mobile directory for expo.
That’s exactly what I mean
All the mobile specific deps go in the sub-directory, and all the general ones used to build :main (IE. the web side) go in the parent directory.
Why? Just curious. It’s not hurting anything, but I’m missing the point
I don't think the mobile package inherits anything from the other, actually. It's probably more accurate to just think of them as separate;
Because your web page doesn't need anything react-native, and your mobile app doesn't need most things your webpage does.
In my project. I’ve got some overlap. But at this point it’s a mute point, because only the native-web portion is working and it’s what I’m not using. I’lll ping you with some results on getting a modern version of expo working soon enough. Appreciate the shout.
@U013TCGL92T Ben! I’ve got a minimal hello-world up with updated deps. It’s super minimal, but your version of the fulcro-app code did the trick. expo-app-loading was causing issues, why? I do not know. There are some notes in the readme. In short, react 17, and the latest Expo cli are needed. Edit: DUH! The link… https://github.com/netdrilling/expo-test
A new blog post, addressing a common newcomers' confusion: https://blog.jakubholy.net/2022/trouble-with-lists-in-fulcro/
Nicely done :thumbsup: I guess the most elusive one is n. 2. It took me a while to appreciate the Pathom data reshaping capabilities, now I use them quite often: both the "deepening" reshape (like the one in your example using placeholders) as well as the "flattening" reshape.