react-native-mmkv: [Expo Dev Client] - Failed to create new MMKV instance. The native initializer function does not exist

Getting this weird error once I press R in the terminal or with reload in my Expo dev client app: expo start --dev-client This error is getting spammed over 26 times. It only happens when I reload. If I restart the expo terminal it all works just fine as usual. Its very on and off when this works and when it doesn’t. I’ve tried starting the terminal with --clear to remove bundler cache and the error persists.

  • Production mode: ✅
  • Dev mode first load: ✅
  • Dev mode hot reload: ✅
  • Dev mode reload by keydown R in terminal: ❌
  • Dev mode reload by Reload button in dev client app: ❌

The hook triggering this error is this:

export const stateKeys = {
	onboarded: "app.onboarded",
};

export const useOnboarded = () => useMMKVBoolean(stateKeys.onboarded);
 ERROR  Error: Failed to create a new MMKV instance, the native initializer function does not exist. Are you trying to use MMKV from different JS Runtimes?

This error is located at:
    in AuthLayout
    in Unknown (created by Route((auth)))
    in Route (created by Route((auth)))
    in Route((auth)) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by QualifiedSlot)
    in QualifiedSlot (created by DefaultNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by QualifiedNavigator)
    in QualifiedNavigator (created by Navigator)
    in Navigator (created by DefaultNavigator)
    in RNCSafeAreaView
    in Unknown (created by DefaultNavigator)
    in DefaultNavigator
    in Unknown (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (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 withDevTools(App))
    in withDevTools(App) (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in 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

About this issue

  • Original URL
  • State: closed
  • Created 10 months ago
  • Reactions: 8
  • Comments: 37 (9 by maintainers)

Most upvoted comments

Fixed in 2.11.0! ❤️💪

@nhuesmann @fli @stevengoldberg @soyjuanmacias @jake-ruth @ludwig-pro @steinalex @sannajammeh

I’m going to spend some time and fix this. Could you guys give me all your app dependencies, i want to find the common dominator. I believe it might be a package clearing the global namespace.

Guys, after struggling a bit with this problem, I found another lib that uses the MMKV from tencent: https://github.com/ammarahm-ed/react-native-mmkv-storage its working just fine in expo 49 and expo router

import "react-native-url-polyfill/auto";
import { createClient } from "@supabase/supabase-js";
import { MMKVLoader } from 'react-native-mmkv-storage';

const supabaseStorage = new MMKVLoader().withInstanceID("supabase.storage").initialize();

export function useSupabase() {
  const MMKVStorage = {
    setItem: (key: string, data: string) => supabaseStorage.setItem(key, data) as any,
    getItem: (key: string) => supabaseStorage.getItem(key) as any,
    removeItem: (key: string) => supabaseStorage.removeItem(key) as any,
  };

  const supabase = createClient(
    process.env.EXPO_PUBLIC_SUPABASE_URL as string,
    process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY as string,
    {
      auth: {
        storage: MMKVStorage,
        autoRefreshToken: true,
        persistSession: true,
        detectSessionInUrl: false,
      },
    },
  );
  return supabase;
}

That was fast!! @chrispader @mrousavy thank you! ❤️

This PR fixes the problem 🚀

I’m having the same issue. Expo SDK 49, dev client build

I’m also getting this error after updating to expo SDK 49. I’m not passing a config object to MMKV, just doing const storage = new MMKV().

same here: “dependencies”: { “@apollo/client”: “^3.8.6”, “@gorhom/bottom-sheet”: “^4.5.1”, “@hookform/resolvers”: “^3.3.2”, “@react-native-community/blur”: “^4.3.2”, “@shopify/flash-list”: “1.4.3”, “@supabase/supabase-js”: “^2.38.2”, “apollo3-cache-persist”: “^0.14.1”, “date-fns”: “^2.30.0”, “expo”: “^49.0.16”, “expo-clipboard”: “~4.3.1”, “expo-constants”: “~14.4.2”, “expo-crypto”: “~12.4.1”, “expo-dev-client”: “~2.4.11”, “expo-gradle-ext-vars”: “^0.1.2”, “expo-image”: “~1.3.4”, “expo-linking”: “~5.0.2”, “expo-location”: “~16.1.0”, “expo-notifications”: “~0.20.1”, “expo-router”: “^2.0.0”, “expo-splash-screen”: “~0.20.5”, “expo-status-bar”: “~1.6.0”, “geodesy”: “^2.4.0”, “graphql”: “^16.8.1”, “lodash.debounce”: “^4.0.8”, “lottie-react-native”: “5.1.6”, “mobx”: “^6.10.2”, “mobx-react-lite”: “^4.0.5”, “mobx-state-tree”: “^5.2.0”, “qs”: “^6.11.2”, “radash”: “^11.0.0”, “react”: “18.2.0”, “react-hook-form”: “^7.47.0”, “react-native”: “0.72.6”, “react-native-date-picker”: “^4.3.3”, “react-native-flash-message”: “^0.4.2”, “react-native-gesture-handler”: “~2.12.0”, “react-native-maps”: “1.7.1”, “react-native-mask-input”: “^1.2.3”, “react-native-mmkv”: “^2.10.2”, “react-native-pager-view”: “6.2.0”, “react-native-paper”: “^5.11.0”, “react-native-reanimated”: “~3.3.0”, “react-native-safe-area-context”: “4.6.3”, “react-native-screens”: “~3.22.0”, “react-native-shadow-2”: “^7.0.8”, “react-native-size-matters”: “^0.4.2”, “react-native-svg”: “13.9.0”, “react-native-tab-view”: “^3.5.2”, “react-native-url-polyfill”: “^2.0.0”, “react-use”: “^17.4.0”, “responsive-native”: “^1.0.2”, “styled-components”: “^6.1.0”, “ts-pattern”: “^5.0.5”, “zod”: “^3.22.4” }, “devDependencies”: { “@babel/core”: “^7.20.0”, “@graphql-codegen/cli”: “^5.0.0”, “@graphql-codegen/client-preset”: “^4.1.0”, “@styled/typescript-styled-plugin”: “^1.0.0”, “@types/lodash.debounce”: “^4.0.8”, “@types/react”: “^18.2.31”, “typeorm”: “^0.3.17”, “typescript”: “^5.2.2” }

// src/config/supabase.ts
import "react-native-url-polyfill/auto";
import { createClient } from "@supabase/supabase-js";
import { MMKV } from "react-native-mmkv";

const storage = new MMKV({ id: "supabase.storage" });
const mmkvStorageConfig = {
  setItem: (key: string, data: string) => storage.set(key, data),
  getItem: (key: string) => storage.getString(key),
  removeItem: (key: string) => storage.delete(key),
};

export const supabase = createClient(
  process.env.EXPO_PUBLIC_SUPABASE_URL as string,
  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY as string,
  {
    auth: {
      storage: mmkvStorageConfig,
      autoRefreshToken: true,
      persistSession: true,
      detectSessionInUrl: false,
    },
  }
);

Happens when reload with R in terminal.

This may have something to do with Expo or something else clearing the global namespace. I changed it to be __mmkvCreateNewInstance instead of mmkvCreateNewInstance and I haven’t seen the error message in half a day. Still not 100% sure though, happy to open a PR once it’s confirmed.

Have attached my .patch if you wanna give it a try with patch-package.

react-native-mmkv+2.10.2.patch

same problem, without config

I confirm the context provide by @sannajammeh :

Production mode: ✅
Dev mode first load: ✅
Dev mode hot reload: ✅
Dev mode reload by keydown R in terminal: ❌
Dev mode reload by Reload button in dev client app: ❌

Those who have problem in that just remove path from it and it works.

@chrispader Thank you so much for fixing this issue!

This PR fixes the problem 🚀

it was fast, really nice.

thanks for your help guys!

Ok thanks, i can reproduce this now. Seems this error doesn’t occur in iOS simulators. I also get it on Android.

Will let you guys know once this is fixed 👍

iOS, monorepo setup, not consistent some reloads nothing, other times i would get the error and would have to do a complete restart of the app.

  "dependencies": {
    "@react-native/normalize-colors": "0.72.0",
    "@invertase/react-native-apple-authentication": "^2.2.2",
    "@react-native-google-signin/google-signin": "^10.0.1",
    "react-native-localize": "^3.0.2",
    "react-native-device-info": "^8.7.0",
    "expo-dev-client": "^2.4.10",
    "zustand": "^4.4.1",
    "dripsy": "^4.3.3",
    "expo-apple-authentication": "^6.1.2",
    "react-native-mmkv": "^2.10.2",
    "@react-native-cookies/cookies": "^6.2.1",
    "@expo/vector-icons": "^13.0.0",
    "@react-navigation/native": "^6.0.2",
    "expo": "~49.0.16",
    "expo-font": "~11.4.0",
    "expo-linking": "~5.0.2",
    "expo-router": "^2.0.9",
    "expo-blur": "^12.6.0",
    "react-native-floating-label-input": "^1.4.2",
    "expo-secure-store": "^12.5.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-system-ui": "~2.4.0",
    "expo-web-browser": "~12.3.2",
    "expo-clipboard": "^4.5.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
    "react-native-drawer-layout": "^3.2.1",
    "@react-navigation/stack": "^6.3.19",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-svg": "13.9.0",
    "expo-updates": "~0.18.13",
    "react-native-component-inview": "^1.0.2",
    "react-native-svg-animated-linear-gradient": "^0.4.0",
    "react-native-google-places-autocomplete": "^2.5.1",
    "emoji-mart-native": "^0.6.5-beta",
    "emoji-datasource-apple": "^15.0.1",
    "sentry-expo": "^7.0.1",
    "expo-application": "~5.3.0",
    "expo-constants": "~14.4.2",
    "expo-notifications": "^0.20.1",
    "customerio-expo-plugin": "^1.0.0-beta.13",
    "customerio-reactnative": "^3.2.1",
    "expo-device": "~5.6.0",
    "@sentry/react-native": "5.5.0",
    "@segment/analytics-react-native": "^2.16.1",
    "@segment/sovran-react-native": "^1.0.4",
    "react-native-get-random-values": "^1.9.0",
    "expo-standard-web-crypto": "^1.7.0",
    "expo-crypto": "^12.6.0",
    "react-native-shared-group-preferences": "^1.1.24",
    "expo-build-properties": "~0.8.3",
    "@intercom/intercom-react-native": "^5.3.1",
    "cookie": "^0.5.0",
    "config-plugin-react-native-intercom": "^1.10.1",
    "moti": "^0.26.0",
    "react-native-toast-message": "^2.1.6",
    "react-native-render-html": "^6.3.4",
    "gradient-parser": "^1.0.2",
    "yup": "^0.32.11",
    "apollo-upload-client": "^17.0.0",
    "@apollo/client": "^3.8.1",
    "expo-checkbox": "~2.1.0",
    "fetch-headers": "^3.0.1",
    "formik": "^2.2.9",
    "graphql": "^16.8.0",
    "graphql-tag": "^2.12.6",
    "graphql-ws": "^5.14.0",
    "intl": "^1.2.5",
    "isomorphic-unfetch": "^4.0.2",
    "lodash": "^4.17.21",
    "mobx": "^6.5.0",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.40",
    "nanoid": "^4.0.0",
    "patch-package": "^7.0.1",
    "query-string": "^6.2.0",
    "react-content-loader": "^6.2.1",
    "react-native-actions-sheet": "0.8.29",
    "react-native-appstate-hook": "^1.0.6",
    "react-native-biometrics": "^3.0.1",
    "react-native-calendars": "^1.1293.0",
    "react-native-collapsible": "^1.6.1",
    "react-native-confirmation-code-field": "^7.3.0",
    "expo-document-picker": "^11.7.0",
    "react-native-rate": "^1.2.10",
    "react-native-rsa-native": "^2.0.5",
    "react-native-select-dropdown": "^1.13.0",
    "react-native-sha256": "^1.4.9",
    "react-native-svg-charts": "^5.4.0",
    "react-native-url-polyfill": "^1.3.0",
    "react-native-webview": "13.6.0",
    "react-use": "^17.4.0",
    "rn-fetch-blob": "^0.12.0",
    "set-cookie-parser": "^2.6.0",
    "ts-is-present": "^1.1.1",
    "d3-shape": "^3.1.0",
    "date-fns": "^2.29.3",
    "axios": "^0.27.2",
    "color": "^3.1.0",
    "@react-native-firebase/app": "^18.6.1",
    "@react-native-firebase/analytics": "^18.6.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.14",
    "@types/react-native": "^0.72.2",
    "jest": "^29.2.1",
    "jest-expo": "~49.0.0",
    "react-test-renderer": "18.2.0",
    "typescript": "~4.7.4",
    "@types/set-cookie-parser": "^2.4.4",
    "@types/react-native-svg-charts": "^5.0.13",
    "@types/react-native-svg-animated-linear-gradient": "^0.4.2"
  },

also, on which platform are you experiencing this issue? iOS and/or Android?

iOS here too. Ill share my deps later today

Thanks!

@chrispader, I was having the problem with these dependencies: “dependencies”: { “@apollo/client”: “^3.8.6”, “@gorhom/bottom-sheet”: “^4.5.1”, “@hookform/resolvers”: “^3.3.2”, “@react-native-community/blur”: “^4.3.2”, “@shopify/flash-list”: “1.4.3”, “@supabase/supabase-js”: “^2.38.2”, “apollo3-cache-persist”: “^0.14.1”, “date-fns”: “^2.30.0”, “expo”: “^49.0.16”, “expo-clipboard”: “~4.3.1”, “expo-constants”: “~14.4.2”, “expo-crypto”: “~12.4.1”, “expo-dev-client”: “~2.4.11”, “expo-gradle-ext-vars”: “^0.1.2”, “expo-image”: “~1.3.4”, “expo-linking”: “~5.0.2”, “expo-location”: “~16.1.0”, “expo-notifications”: “~0.20.1”, “expo-router”: “^2.0.0”, “expo-splash-screen”: “~0.20.5”, “expo-status-bar”: “~1.6.0”, “geodesy”: “^2.4.0”, “graphql”: “^16.8.1”, “lodash.debounce”: “^4.0.8”, “lottie-react-native”: “5.1.6”, “mobx”: “^6.10.2”, “mobx-react-lite”: “^4.0.5”, “mobx-state-tree”: “^5.2.0”, “qs”: “^6.11.2”, “radash”: “^11.0.0”, “react”: “18.2.0”, “react-hook-form”: “^7.47.0”, “react-native”: “0.72.6”, “react-native-date-picker”: “^4.3.3”, “react-native-flash-message”: “^0.4.2”, “react-native-gesture-handler”: “~2.12.0”, “react-native-maps”: “1.7.1”, “react-native-mask-input”: “^1.2.3”, “react-native-mmkv”: “^2.10.2”, “react-native-pager-view”: “6.2.0”, “react-native-paper”: “^5.11.0”, “react-native-reanimated”: “~3.3.0”, “react-native-safe-area-context”: “4.6.3”, “react-native-screens”: “~3.22.0”, “react-native-shadow-2”: “^7.0.8”, “react-native-size-matters”: “^0.4.2”, “react-native-svg”: “13.9.0”, “react-native-tab-view”: “^3.5.2”, “react-native-url-polyfill”: “^2.0.0”, “react-use”: “^17.4.0”, “responsive-native”: “^1.0.2”, “styled-components”: “^6.1.0”, “ts-pattern”: “^5.0.5”, “zod”: “^3.22.4” }, “devDependencies”: { “@babel/core”: “^7.20.0”, “@graphql-codegen/cli”: “^5.0.0”, “@graphql-codegen/client-preset”: “^4.1.0”, “@styled/typescript-styled-plugin”: “^1.0.0”, “@types/lodash.debounce”: “^4.0.8”, “@types/react”: “^18.2.31”, “typeorm”: “^0.3.17”, “typescript”: “^5.2.2” }

The thing is that the problem is not 100% of times consistent, had times that I reloaded and it didnt failed.

Is anyone experiencing this in a clean expo project? In my case, Im using managed workflow with dev client, so I install the dependencies above and run expo prebuild. My expo plugins:

"plugins": [
  "@react-native-firebase/app",
  "@react-native-firebase/perf",
  "@react-native-firebase/crashlytics",
  [
    "expo-build-properties",
    {
      "ios": {
        "useFrameworks": "static"
      }
    }
  ],
  [
    "expo-location",
    {
      "locationWhenInUsePermission": "Allow $(PRODUCT_NAME) to use your location."
    }
  ],
  [
    "expo-gradle-ext-vars",
    {
      "googlePlayServicesLocationVersion": "20.0.0",
      "appCompatVersion": "1.4.2"
    }
  ],
  "expo-router"
]

Im in a monorepo using expo router, I think that the problem is related to expo router, your fresh test used expo router?

which platform are you experiencing this issue? iOS and/or Android? in my case, iOS

Guys, after struggling a bit with this problem, I found another lib that uses the MMKV from tencent: https://github.com/ammarahm-ed/react-native-mmkv-storage its working just fine in expo 49 and expo router

import "react-native-url-polyfill/auto";
import { createClient } from "@supabase/supabase-js";
import { MMKVLoader } from 'react-native-mmkv-storage';

const supabaseStorage = new MMKVLoader().withInstanceID("supabase.storage").initialize();

export function useSupabase() {
  const MMKVStorage = {
    setItem: (key: string, data: string) => supabaseStorage.setItem(key, data) as any,
    getItem: (key: string) => supabaseStorage.getItem(key) as any,
    removeItem: (key: string) => supabaseStorage.removeItem(key) as any,
  };

  const supabase = createClient(
    process.env.EXPO_PUBLIC_SUPABASE_URL as string,
    process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY as string,
    {
      auth: {
        storage: MMKVStorage,
        autoRefreshToken: true,
        persistSession: true,
        detectSessionInUrl: false,
      },
    },
  );
  return supabase;
}

Yeah, we have also switched to this library instead now. I tried finding the issue but just couldn’t.

We are still encountering this issue, any possible solutions?

@claudesortwell

"dependencies": {
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-community/netinfo": "9.3.10",
    "@react-native-picker/picker": "2.4.10",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "@react-navigation/stack": "^6.3.16",
    "@reduxjs/toolkit": "^1.9.5",
    "@shopify/flash-list": "1.4.3",
    "@shopify/react-native-skia": "0.1.196",
    "accordion-collapse-react-native": "^1.1.1",
    "date-fns": "^2.30.0",
    "expo": "^49.0.0",
    "expo-blur": "~12.4.1",
    "expo-camera": "~13.4.4",
    "expo-crypto": "~12.4.1",
    "expo-dev-client": "~2.4.11",
    "expo-file-system": "~15.4.4",
    "expo-font": "~11.4.0",
    "expo-haptics": "~12.4.0",
    "expo-image": "~1.3.4",
    "expo-image-manipulator": "~11.3.0",
    "expo-image-picker": "~14.3.2",
    "expo-location": "~16.1.0",
    "expo-mail-composer": "~12.3.0",
    "expo-media-library": "~15.4.1",
    "expo-sharing": "~11.5.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-updates": "~0.18.14",
    "immer": "^10.0.2",
    "lodash": "^4.17.21",
    "lottie-react-native": "5.1.6",
    "native-base": "^3.4.28",
    "patch-package": "^7.0.0",
    "react": "18.2.0",
    "react-devtools": "^4.27.8",
    "react-native": "0.72.5",
    "react-native-autocomplete-input": "^5.3.2",
    "react-native-countdown-circle-timer": "^3.2.1",
    "react-native-devsettings": "^1.0.5",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-image-colors": "^2.3.0",
    "react-native-midnight": "^1.0.2",
    "react-native-mmkv": "^2.10.0",
    "react-native-onboarding-swiper": "^1.2.0",
    "react-native-reanimated": "^3.5.4",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-share": "^9.2.2",
    "react-native-shared-element": "^0.8.8",
    "react-native-svg": "13.9.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-view-shot": "^3.7.0",
    "react-native-vision-camera": "^3.4.0",
    "react-native-volume-manager": "^1.8.1",
    "react-native-webview": "13.2.2",
    "react-navigation-shared-element": "^3.1.3",
    "react-redux": "^8.1.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/eslint-plugin": "^7.22.5",
    "@welldone-software/why-did-you-render": "^7.0.1",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-universe": "^11.2.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^2.8.8"
  },

Hey!

  1. Can you reproduce the issue in a fresh app that only has react-native-mmkv installed?
  2. I believe this is related to react-native-reanimated.