search

fulcrologic / fulcro-native

A small library of helpers for using React Native with Fulcro
27 stars 7 forks source link

Unable to mount app on expo 44/react 17 #8

Open ghost opened 2 years ago

ghost commented 2 years ago

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 G51924delegate @ components.cljc:109 G51924 @ 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 G297042 @ core.cljs:4365 eval @ keyframe_render.cljc:52 com$fulcrologic$fulcro$rendering$keyframe_render$renderBANG @ keyframe_render.cljc:52 eval @ application.cljc:257 eval @ application.cljc:111 reset_mountpointBANG @ 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.G297042 [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$renderBANG (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_mountpointBANG (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 G297042 @ core.cljs:4365 eval @ keyframe_render.cljc:52 com$fulcrologic$fulcro$rendering$keyframe_render$renderBANG @ keyframe_render.cljc:52 eval @ application.cljc:257 eval @ application.cljc:111 reset_mountpointBANG @ 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 G297042 @ core.cljs:4365 eval @ keyframe_render.cljc:52 com$fulcrologic$fulcro$rendering$keyframe_render$renderBANG @ keyframe_render.cljc:52 eval @ application.cljc:257 eval @ application.cljc:111 reset_mountpointBANG @ 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.G297042 [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$renderBANG (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_mountpointBANG (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`

ghost commented 2 years ago

Just some additional info that may be helpful. The above was from the console when opened in browser, here are the errors from expo when opened on Android. There might be something in the slight difference that is instructive.

`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://192.168.12.157:19000/build/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:145702:23 in error at node_modules/react/cjs/react.development.js:216:27 in printWarning at http://192.168.12.157:19000/build/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:4599:22 in error at node_modules/react/cjs/react.development.js:2214:4 in createElementWithValidation at http://192.168.12.157:19000/build/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:21970:49 in updateClassComponent at http://192.168.12.157:19000/build/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:26932:33 in beginWork$1 at http://192.168.12.157:19000/build/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:16933:34 in flushSyncCallbackQueue at http://192.168.12.157:19000/build/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:28735:23 in render at node_modules/react-native/Libraries/ReactNative/renderApplication.js:57:9 in renderApplication at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:116:11 in runnables.appKey.run at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:201:4 in runApplication at http://192.168.12.157:19000/build/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:8077:20 in callFunctionReturnFlushedQueue

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.

This error is located at: in Unknown (created by ExpoRoot) in ExpoRoot in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer at http://192.168.12.157:19000/build/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:145702:23 in error at node_modules/react-native/Libraries/Core/ExceptionsManager.js:100:8 in reportException at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:4 in handleException at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:23:8 in handleError at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:8:32 in ErrorUtils.setGlobalHandler$argument_0 at http://192.168.12.157:19000/build/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:34657:26 in at http://192.168.12.157:19000/build/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:35828:32 in callImmediates at http://192.168.12.157:19000/build/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:8099:20 in flushedQueue`

Kaspazza commented 1 year ago

This was fixed by #10