fulcrologic / fulcro-native Goto Github PK

I've been messing about with running fulcro in expo. I've tried a few of the existing fulcro-native apps on github. Nothing seems to work with any recent version of expo 44/45. All get the same errors involving mounting the app.

This morning I started by porting
https://github.com/jgoodhcg/create-expo-cljs-app
SHA: ad3ad15fd8302a11a55223b4b5735deb89360b71 (most recent)

I'm using
com.fulcrologic/fulcro {:mvn/version "3.5.22"}
com.fulcrologic/fulcro-native {:mvn/version "0.0.10"}

`(def APP-NAME "TEST") 4 references
(defonce ^:export FULCRO-APP (native-app/fulcro-app {})) 11 references

(defsc ^:export Root [this props] {} 9 references
(ui-view {} (ui-text {} "HUH?")))
`
(defn ^:export init []
(app/mount! FULCRO-APP Root :none))

I've exhausted my problem solving skills with this one. But I am available to try things if you are interested in investigating. These are the errors that persist across a few versions/setups.

`Warning: React.createElement: 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.
at (http://localhost:19006/static/js/bundle.js:9625:37)
at ExpoRootComponent (http://localhost:19006/static/js/bundle.js:12858:83)
at div
at http://localhost:19006/static/js/bundle.js:50469:25
at div
at http://localhost:19006/static/js/bundle.js:50469:25
at AppContainer (http://localhost:19006/static/js/bundle.js:42390:24)
console. @ index.js:1
error @ react-native-logs.fx.ts:35
printWarning @ react.development.js:221
error @ react.development.js:197
createElementWithValidation @ react.development.js:2216
eval @ core.cljs:3947
eval @ core.cljs:3989
G__51924__delegate @ components.cljc:109
G__51924 @ components.cljc:100
render @ expo_application.cljc:50
finishClassComponent @ react-dom.development.js:17486
updateClassComponent @ react-dom.development.js:17436
beginWork @ react-dom.development.js:19074
callCallback @ react-dom.development.js:3946
invokeGuardedCallbackDev @ react-dom.development.js:3995
invokeGuardedCallback @ react-dom.development.js:4057
beginWork$1 @ react-dom.development.js:23965
performUnitOfWork @ react-dom.development.js:22777
workLoopSync @ react-dom.development.js:22708
renderRootSync @ react-dom.development.js:22671
performSyncWorkOnRoot @ react-dom.development.js:22294
scheduleUpdateOnFiber @ react-dom.development.js:21882
updateContainer @ react-dom.development.js:25483
(anonymous) @ react-dom.development.js:26022
unbatchedUpdates @ react-dom.development.js:22432
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26021
render @ react-dom.development.js:26104
renderApplication @ renderApplication.js:24
run @ index.js:50
runApplication @ index.js:94
registerRootComponent @ registerRootComponent.tsx:14
com$fulcrologic$fulcro_native$expo_application$render_root @ expo_application.cljc:52
G__29704__2 @ core.cljs:4365
eval @ keyframe_render.cljc:52
com$fulcrologic$fulcro$rendering$keyframe_render$render_BANG_ @ keyframe_render.cljc:52
eval @ application.cljc:257
eval @ application.cljc:111
reset_mountpoint_BANG_ @ application.cljc:322
eval @ application.cljc:332
eval @ application.cljc:302
net$drilling$app$native$mobile$init @ mobile.cljc:7
eval @ VM697:4
./build/index.js.goog.globalEval @ index.js:473
env.evalLoad @ index.js:1417
(anonymous) @ index.js:1677
./build/index.js @ index.js:1677
webpack_require @ bootstrap:789
fn @ bootstrap:100
1 @ index.js:589
webpack_require @ bootstrap:789
(anonymous) @ bootstrap:856
(anonymous) @ bootstrap:856
Show 22 more frames
react-dom.development.js:25059 Uncaught 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.
at createFiberFromTypeAndProps (react-dom.development.js:25059:1)
at createFiberFromElement (react-dom.development.js:25087:1)
at reconcileSingleElement (react-dom.development.js:14053:1)
at reconcileChildFibers (react-dom.development.js:14113:1)
at reconcileChildren (react-dom.development.js:16991:1)
at finishClassComponent (react-dom.development.js:17512:1)
at updateClassComponent (react-dom.development.js:17436:1)
at beginWork (react-dom.development.js:19074:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3946:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3995:1)
at invokeGuardedCallback (react-dom.development.js:4057:1)
at beginWork$1 (react-dom.development.js:23965:1)
at performUnitOfWork (react-dom.development.js:22777:1)
at workLoopSync (react-dom.development.js:22708:1)
at renderRootSync (react-dom.development.js:22671:1)
at performSyncWorkOnRoot (react-dom.development.js:22294:1)
at scheduleUpdateOnFiber (react-dom.development.js:21882:1)
at updateContainer (react-dom.development.js:25483:1)
at react-dom.development.js:26022:1
at unbatchedUpdates (react-dom.development.js:22432:1)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:26021:1)
at render (react-dom.development.js:26104:1)
at renderApplication (renderApplication.js:24:1)
at Object.run (index.js:50:1)
at Function.runApplication (index.js:94:1)
at Module.registerRootComponent (registerRootComponent.tsx:14:1)
at com$fulcrologic$fulcro_native$expo_application$render_root (expo_application.cljc:52:15)
at Function.G__29704__2 [as cljs$core$IFn$invoke$arity$2] (core.cljs:4365:14)
at eval (keyframe_render.cljc:52:32)
at com$fulcrologic$fulcro$rendering$keyframe_render$render_BANG (keyframe_render.cljc:52:31)
at eval (application.cljc:257:44)
at Function.eval [as cljs$core$IFn$invoke$arity$2] (application.cljc:111:13)
at reset_mountpoint_BANG (application.cljc:322:39)
at Function.eval [as cljs$core$IFn$invoke$arity$4] (application.cljc:332:13)
at Function.eval [as cljs$core$IFn$invoke$arity$3] (application.cljc:302:5)
at Object.net$drilling$app$native$mobile$init [as init] (mobile.cljc:7:4)
at eval (eval at ./build/index.js.goog.globalEval (index.js:473:1), :4:39)
at eval ()
at Object../build/index.js.goog.globalEval (index.js:473:1)
at Object.env.evalLoad (index.js:1417:1)
at Object. (index.js:1677:1)
at Object../build/index.js (index.js:1677:1)
at webpack_require (bootstrap:789:1)
at fn (bootstrap:100:1)
at Object.1 (index.js:589:1)
at webpack_require (bootstrap:789:1)
at bootstrap:856:1
at bootstrap:856:1
createFiberFromTypeAndProps @ react-dom.development.js:25059
createFiberFromElement @ react-dom.development.js:25087
reconcileSingleElement @ react-dom.development.js:14053
reconcileChildFibers @ react-dom.development.js:14113
reconcileChildren @ react-dom.development.js:16991
finishClassComponent @ react-dom.development.js:17512
updateClassComponent @ react-dom.development.js:17436
beginWork @ react-dom.development.js:19074
callCallback @ react-dom.development.js:3946
invokeGuardedCallbackDev @ react-dom.development.js:3995
invokeGuardedCallback @ react-dom.development.js:4057
beginWork$1 @ react-dom.development.js:23965
performUnitOfWork @ react-dom.development.js:22777
workLoopSync @ react-dom.development.js:22708
renderRootSync @ react-dom.development.js:22671
performSyncWorkOnRoot @ react-dom.development.js:22294
scheduleUpdateOnFiber @ react-dom.development.js:21882
updateContainer @ react-dom.development.js:25483
(anonymous) @ react-dom.development.js:26022
unbatchedUpdates @ react-dom.development.js:22432
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26021
render @ react-dom.development.js:26104
renderApplication @ renderApplication.js:24
run @ index.js:50
runApplication @ index.js:94
registerRootComponent @ registerRootComponent.tsx:14
com$fulcrologic$fulcro_native$expo_application$render_root @ expo_application.cljc:52
G__29704__2 @ core.cljs:4365
eval @ keyframe_render.cljc:52
com$fulcrologic$fulcro$rendering$keyframe_render$render_BANG @ keyframe_render.cljc:52
eval @ application.cljc:257
eval @ application.cljc:111
reset_mountpoint_BANG @ application.cljc:322
eval @ application.cljc:332
eval @ application.cljc:302
net$drilling$app$native$mobile$init @ mobile.cljc:7
eval @ VM697:4
./build/index.js.goog.globalEval @ index.js:473
env.evalLoad @ index.js:1417
(anonymous) @ index.js:1677
./build/index.js @ index.js:1677
webpack_require @ bootstrap:789
fn @ bootstrap:100
1 @ index.js:589
webpack_require @ bootstrap:789
(anonymous) @ bootstrap:856
(anonymous) @ bootstrap:856
Show 17 more frames
index.js:1 The above error occurred in one of your React components:

at <anonymous> (http://localhost:19006/static/js/bundle.js:9625:37)
at ExpoRootComponent (http://localhost:19006/static/js/bundle.js:12858:83)
at div
at http://localhost:19006/static/js/bundle.js:50469:25
at div
at http://localhost:19006/static/js/bundle.js:50469:25
at AppContainer (http://localhost:19006/static/js/bundle.js:42390:24)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console. @ index.js:1
error @ react-native-logs.fx.ts:35
logCapturedError @ react-dom.development.js:20091
update.callback @ react-dom.development.js:20119
callCallback @ react-dom.development.js:12319
commitUpdateQueue @ react-dom.development.js:12340
commitLifeCycles @ react-dom.development.js:20737
commitLayoutEffects @ react-dom.development.js:23427
callCallback @ react-dom.development.js:3946
invokeGuardedCallbackDev @ react-dom.development.js:3995
invokeGuardedCallback @ react-dom.development.js:4057
commitRootImpl @ react-dom.development.js:23152
unstable_runWithPriority @ scheduler.development.js:469
runWithPriority$1 @ react-dom.development.js:11277
commitRoot @ react-dom.development.js:22991
performSyncWorkOnRoot @ react-dom.development.js:22330
scheduleUpdateOnFiber @ react-dom.development.js:21882
updateContainer @ react-dom.development.js:25483
(anonymous) @ react-dom.development.js:26022
unbatchedUpdates @ react-dom.development.js:22432
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26021
render @ react-dom.development.js:26104
renderApplication @ renderApplication.js:24
run @ index.js:50
runApplication @ index.js:94
registerRootComponent @ registerRootComponent.tsx:14
com$fulcrologic$fulcro_native$expo_application$render_root @ expo_application.cljc:52
G__29704__2 @ core.cljs:4365
eval @ keyframe_render.cljc:52
com$fulcrologic$fulcro$rendering$keyframe_render$render_BANG_ @ keyframe_render.cljc:52
eval @ application.cljc:257
eval @ application.cljc:111
reset_mountpoint_BANG_ @ application.cljc:322
eval @ application.cljc:332
eval @ application.cljc:302
net$drilling$app$native$mobile$init @ mobile.cljc:7
eval @ VM697:4
./build/index.js.goog.globalEval @ index.js:473
env.evalLoad @ index.js:1417
(anonymous) @ index.js:1677
./build/index.js @ index.js:1677
webpack_require @ bootstrap:789
fn @ bootstrap:100
1 @ index.js:589
webpack_require @ bootstrap:789
(anonymous) @ bootstrap:856
(anonymous) @ bootstrap:856
Show 17 more frames
index.js:1 2022-07-03T13:52:28.289Z 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.
at createFiberFromTypeAndProps (http://localhost:19006/static/js/bundle.js:40851:21)
at createFiberFromElement (http://localhost:19006/static/js/bundle.js:40879:15)
at reconcileSingleElement (http://localhost:19006/static/js/bundle.js:29850:23)
at reconcileChildFibers (http://localhost:19006/static/js/bundle.js:29910:35)
at reconcileChildren (http://localhost:19006/static/js/bundle.js:32788:28)
at finishClassComponent (http://localhost:19006/static/js/bundle.js:33309:5)
at updateClassComponent (http://localhost:19006/static/js/bundle.js:33233:24)
at beginWork (http://localhost:19006/static/js/bundle.js:34871:16)
at HTMLUnknownElement.callCallback (http://localhost:19006/static/js/bundle.js:19743:14)
at Object.invokeGuardedCallbackDev (http://localhost:19006/static/js/bundle.js:19792:16)
at invokeGuardedCallback (http://localhost:19006/static/js/bundle.js:19854:31)
at beginWork$1 (http://localhost:19006/static/js/bundle.js:39757:7)
at performUnitOfWork (http://localhost:19006/static/js/bundle.js:38569:12)
at workLoopSync (http://localhost:19006/static/js/bundle.js:38500:5)
at renderRootSync (http://localhost:19006/static/js/bundle.js:38463:7)
at performSyncWorkOnRoot (http://localhost:19006/static/js/bundle.js:38086:18)
at scheduleUpdateOnFiber (http://localhost:19006/static/js/bundle.js:37674:7)
at updateContainer (http://localhost:19006/static/js/bundle.js:41275:3)
at http://localhost:19006/static/js/bundle.js:41814:7
at unbatchedUpdates (http://localhost:19006/static/js/bundle.js:38224:12)
at legacyRenderSubtreeIntoContainer (http://localhost:19006/static/js/bundle.js:41813:5)
at render (http://localhost:19006/static/js/bundle.js:41896:10)
at renderApplication (http://localhost:19006/static/js/bundle.js:42623:3)
at Object.run (http://localhost:19006/static/js/bundle.js:42511:82)
at Function.runApplication (http://localhost:19006/static/js/bundle.js:42554:23)
at Module.registerRootComponent (http://localhost:19006/static/js/bundle.js:12801:87)
at com$fulcrologic$fulcro_native$expo_application$render_root (http://localhost:8081/app/com.fulcrologic.fulcro_native.expo_application.js:56:35)
at Function.G__29704__2 [as cljs$core$IFn$invoke$arity$2] (http://localhost:8081/app/cljs.core.js:15234:94)
at eval (http://localhost:8081/app/com.fulcrologic.fulcro.rendering.keyframe_render.js:98:57)
at com$fulcrologic$fulcro$rendering$keyframe_render$render_BANG (http://localhost:8081/app/com.fulcrologic.fulcro.rendering.keyframe_render.js:99:3)
at eval (http://localhost:8081/app/com.fulcrologic.fulcro.application.js:335:173)
at Function.eval [as cljs$core$IFn$invoke$arity$2] (http://localhost:8081/app/com.fulcrologic.fulcro.raw.application.js:164:169)
at reset_mountpoint_BANG (http://localhost:8081/app/com.fulcrologic.fulcro.application.js:470:137)
at Function.eval [as cljs$core$IFn$_invoke$arity$4] (http://localhost:8081/app/com.fulcrologic.fulcro.application.js:495:1)
at Function.eval [as cljs$core$IFn$_invoke$arity$3] (http://localhost:8081/app/com.fulcrologic.fulcro.application.js:433:55)
at Object.net$drilling$app$native$mobile$init [as init] (http://localhost:8081/app/net.drilling.app.native.mobile.js:3:55)
at eval (eval at ./build/index.js.goog.globalEval (http://localhost:19006/static/js/bundle.js:6079:12), :4:39)
at eval ()
at Object../build/index.js.goog.globalEval (http://localhost:19006/static/js/bundle.js:6079:12)
at Object.env.evalLoad (http://localhost:19006/static/js/bundle.js:7269:10)
at Object. (http://localhost:19006/static/js/bundle.js:7542:12)
at Object../build/index.js (http://localhost:19006/static/js/bundle.js:7543:30)
at webpack_require (http://localhost:19006/static/js/bundle.js:790:30)
at fn (http://localhost:19006/static/js/bundle.js:101:20)
at Object.1 (http://localhost:19006/static/js/bundle.js:69279:18)
at webpack_require (http://localhost:19006/static/js/bundle.js:790:30)
at http://localhost:19006/static/js/bundle.js:857:37
at http://localhost:19006/static/js/bundle.js:860:10`

Hi! First of all, thanks for the great work you've been doing. I've been learning about fulcro and react native for a few weeks. I managed to make my working app based on the skeleton you've provided a few days ago at fulcro-expo-template. One diference between then and now is that partial-element did not wrap strings in ui-text, as react-factory does now.

This may not be desirable when dealing with external libraries. For instance, I'm using UI Kitten, which provides its custom Button component. While React Native's Button takes its text from its title props, UI Kitten's uses its child string. So it works with partial-element but not with react-factory.

I'm not attaching a PR because this is kind of a soft issue, but an alternative would be to implement this behavior only on some specific components (not sure which ones, since I'm not using React Native's default components either).

Thanks!

Expo SDK 40 made a breaking change by moving AppLoading to a different package.

See https://blog.expo.io/expo-sdk-40-is-now-available-d4d73e67da33 : AppLoading has been extracted from the expo package

This results in the following error when app starts up:

Exception

The following APIs have moved to separate packages and importing them from the "expo" package is no longer supported: AppLoading.

1. Add correct versions of these packages to your project

using:

expo install expo-app-loading

2. Change your imports so they use specific packages instead of the "expo" package:

-import { AppLoading} from 'expo-> import AppLoading.

from expo-app-loading'

I implemented a workaround/fix for this here:
andrerichards@b9cc506

I added new namespaces expo_application_40.cljc and expo_assets_40.cljc as updating the current namespaces would break code that use SDK pre v40. I can open a pull request for this if you like.