Observable is not a function (it is undefined) error

[zoltlabs]

Hi, I get an error saying:

TypeError: cache.get is not a function (it is undefined).

For reference: export const cache$ = observable(new Map<string, string> The code where it throws this error looks like this, within a React component:

const cache = cache$.get();
const item = cache.get("key");  // <--- the error throws here

I don't know why this would be happening.. I'm pretty stumped.

In my _layout.tsx, I persist it like:

export const cacheSave = syncObservable(cache$, { initial: new Map(), persist: { name: 'zcache' } });

For reference, this is the call stack:

This error is located at:
    in CacheItemCard (created by CacheItemView) <--- these are the names of my components
    in RCTView (created by View)
    in View (created by CacheItemView)
    in RCTView (created by View)
    in View (created by CacheItemView)
    in RCTView (created by View)
    in View (created by CacheItemView)
    in RCTView (created by View)
    in View (created by CacheItemView)
    in CacheItemView (created by LogScreen)
    in RCTView (created by View)
    in View (created by LogScreen)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by LogScreen)
    in RCTSafeAreaView (created by LogScreen)
    in LogScreen
    in Unknown (created by Route(log))
    in Suspense (created by Route(log))
    in Route (created by Route(log))
    in Route(log) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomTabView)
    in RCTView (created by View)
    in View (created by Screen)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by Screen)
    in Screen (created by BottomTabView)
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous) (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by BottomTabView)
    in RNSScreenNavigationContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by BottomTabView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator
    in Unknown (created by TabLayout)
    in TabLayout
    in Unknown (created by Route((tabs)))
    in Suspense (created by Route((tabs)))
    in Route (created by Route((tabs)))
    in Route((tabs)) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous) (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator
    in Unknown (created by StackLayout)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by StackLayout)
    in StackLayout
    in Unknown (created by Route((app)))
    in Suspense (created by Route((app)))
    in Route (created by Route((app)))
    in Route((app)) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous) (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator
    in Unknown (created by RootLayoutNav)
    in ThemeProvider (created by RootLayoutNav)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by RootLayoutNav)
    in KeyboardControllerView (created by Animated(Anonymous))
    in Animated(Anonymous) (created by AnimatedComponent(Animated(Anonymous)))
    in AnimatedComponent(Animated(Anonymous))
    in Unknown (created by KeyboardProvider)
    in KeyboardProvider (created by RootLayoutNav)
    in RootLayoutNav (created by RootLayout)
    in RootLayout
    in Try
    in Unknown
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes

[zoltlabs]

I found when I remove persistence for it, this issue disappears... but that's kind of a problem since I do need persistence.. I'm using AsyncStorage for reference.

[zoltlabs]

A possible culprit: It appears that legend state is occasionally writing an unresolved promise to async storage as opposed to the final result of the promise, which then results in an issue later on.

[jmeistrich]

Oh interesting! Do you see a pattern for when it's doing that?

[jar145]

Not sure if this is the same issue, but I am also running into something similar.

If I use .get() by itself I get a result, but if I try to use any kind of mapping functions I get the undefined error. For example: const recipes = recipes$.get().values(); gives me: ERROR TypeError: recipes$.get().values is not a function (it is undefined)

This happens with keys() or has() along with others.

[zoltlabs]

Oh that might be it! I didn't actually think that would make a difference but maybe inadvertently that would be what would be fixing it.

[jar145]

Hi @jmeistrich I know there are a lot of issues to manage, but wondering if you had some insight on this. I'm happy to contribute, but may need a little direction first.

[jmeistrich]

Sorry, I've been really busy preparing a talk and then a workshop for the past couple of weeks. I'm at React Native London today then I'm going to catch up on issues. So I'll try to fix this soon!

[jar145]

No worries, I completely understand. Thanks!