undefined is not an object global.performance.now in expo react native project

Question

I'm trying to run the app using the expo start command. It worked fine so far but today it's showing like this.

Any help would be greatly appreciated! :)

These are my dependencies

{
  "dependencies": {
    "@expo-google-fonts/manrope": "^0.2.0",
    "@expo-google-fonts/roboto": "^0.2.2",
    "@expo/react-native-action-sheet": "^3.12.0",
    "@flyerhq/react-native-link-preview": "^1.6.0",
    "@gorhom/bottom-sheet": "4",
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-native-community/hooks": "^2.8.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "7.1.3",
    "@react-native-firebase/app": "^14.5.0",
    "@react-native-firebase/messaging": "^14.5.0",
    "@react-native-picker/picker": "2.2.1",
    "@react-navigation/core": "^6.1.1",
    "@react-navigation/material-top-tabs": "^6.0.6",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "@react-navigation/stack": "^6.1.1",
    "@stomp/stompjs": "^6.1.2",
    "@stripe/stripe-react-native": "0.2.3",
    "expo-linking": "~3.0.0",
    "expo-media-library": "~14.0.0",
    "expo-notifications": "~0.14.0",
    "expo-splash-screen": "~0.14.1",
    "expo-status-bar": "~1.2.0",
    "expo-updates": "~0.11.6",
    "expo-web-browser": "~10.1.0",
    "firebase": "^9.6.7",
    "firebase-admin": "^10.0.0",,
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-actionsheet": "^2.4.2",
    "react-native-bottomsheet-reanimated": "^0.1.1",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-hold-menu": "^0.1.1",
    "react-native-image-crop-picker": "^0.37.2",
    "react-native-image-picker": "^4.7.0",
    "react-native-image-resizer": "^1.4.5",
    "react-native-image-viewing": "^0.2.1",
    "react-native-ionicons": "^4.x",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-link-preview": "^1.4.2",
    "react-native-pager-view": "5.4.9",
    "react-native-parsed-text": "^0.0.22",
    "react-native-push-notification": "^8.1.1",
    "react-native-reanimated": "2.4.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-sticky-parallax-header": "^0.4.1",
    "react-native-svg": "12.1.1",
    "react-native-svg-charts": "^5.4.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-unimodules": "0.12.0",
    "react-native-vector-icons": "^9.0.0",
    "react-native-web": "0.17.1",
    "react-native-webview": "11.15.0",
    "react-navigation": "^4.4.4",
    "rn-fetch-blob": "^0.12.0",
    "socket.io-client": "^4.4.1",
    "sockjs-client": "1.4.0",
    "stompjs": "2.3.3",
    "text-encoding": "^0.7.0",
    "url": "^0.11.0",
    "watchman": "^1.0.0"
  }}

I've tried changing the versions of the react-native-reanimated package but still couldn't figure out the problem.

Answer 1

I had this problem recently myself. I'm not entirely sure why this is happening but you can try to find the root cause by trial and error. For me, I did a global find of all references to global.performance.now in the build folder and commented out all of them in the code (they were all js files from node_modules packages in the build folder). Once I tried to reload the app, I would get a more detailed message about a missing reference or undefined variable (since I commented the lines calling on global.performance.now). In my case, it ended up being located in the react-native package, specifically in the createPerformanceLogger.js file. What was interesting was that I was able to find another file in the package that actually sets up this object here.

So, as a temporary workaround, I added a require('../Core/setUpPerformance'); statement in the createPerformanceLogger.js import statements. This fixed the issue for me. Obviously, this isn't pretty since it requires altering build files. What I did was add a post-build step to do this programmatically after every build in order to avoid doing this manually (my setup uses Kotlinjs as well, so I added it as a post assemble step in my gradle.build.kts file). In any case, YMMV but determining the root cause this way will help unblock you in the meantime until finding a more long term solution.

It's worth noting that I eventually started playing with react + react-native versions in my package.json and now the react-native package is not even bundled in my build output (which I thought was strange), but it means that I no longer need the workaround. By the way, in case you're curious, here are my react and react-native versions used.