Fork me on GitHub
#fulcro
<
2022-07-02
>
Patrick Brown13:07:06

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. 👍💪🦕.

Jakub Holý (HolyJak)22:07:58

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?

Patrick Brown23:07:19

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.

👍 1
😭 1
Benjamin C01:07:30

@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.

Patrick Brown02:07:00

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?

Benjamin C17:07:25

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

Benjamin C17:07:12

Hmm, I didn't know about the -40 variants before, I'm kinda surprised that isn't the default.

Patrick Brown17:07:01

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.

Benjamin C17:07:49

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. 😛

Patrick Brown17:07:51

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.

Benjamin C17:07:14

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.

Patrick Brown17:07:28

That’s exactly what I mean

Benjamin C17:07:43

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.

Patrick Brown17:07:15

Why? Just curious. It’s not hurting anything, but I’m missing the point

Benjamin C17:07:20

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;

Benjamin C17:07:23

Because your web page doesn't need anything react-native, and your mobile app doesn't need most things your webpage does.

Patrick Brown17:07:02

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.

👍 1
Patrick Brown13:07:48

@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

🎉 1
Jakub Holý (HolyJak)22:07:58

A new blog post, addressing a common newcomers' confusion: https://blog.jakubholy.net/2022/trouble-with-lists-in-fulcro/

🙏 3
Thomas Moerman07:07:13

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.

❤️ 1