Problem with upgrading Expo Go app from SDK 49 to 51

Question

The developers on my team are having trouble running our app on Expo Go, which recently upgraded to SDK 51. I followed the steps here (https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/) and edited our package.json and babel.config.js to accomodate for these changes. However, when running the app on Expo Go, the following errors appear on startup:

Cannot read property 'NativeModule' of undefined "main" has not been registered

Has anyone else encountered similar issues with upgrading to SDK 51?

This is our new package.json:

{
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "eas-build-pre-install": "npm i",
    "test": "jest"
  },
  "dependencies": {
    "@expo-google-fonts/inter": "^0.2.2",
    "@expo-google-fonts/roboto": "^0.2.3",
    "@expo/config": "^8.1.1",
    "@expo/config-plugins": "~7.2.2",
    "@expo/metro-config": "^0.10.0",
    "@expo/prebuild-config": "~6.2.4",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-community/cli-platform-android": "^11.3.7",
    "@react-native-community/datetimepicker": "7.2.0",
    "@react-native-google-signin/google-signin": "^11.0.1",
    "@react-native-masked-view/masked-view": "0.2.9",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.0",
    "axios": "^0.27.2",
    "dotenv": "^16.0.3",
    "eas-cli": "^2.1.0",
    "eslint": "^8.22.0",
    "eslint-config-rallycoding": "^3.2.0",
    "expo": "51.0.0",
    "expo-app-loading": "~2.1.0",
    "expo-application": "~5.3.0",
    "expo-auth-session": "~5.0.2",
    "expo-constants": "~14.4.2",
    "expo-dev-client": "~2.4.13",
    "expo-font": "~11.4.0",
    "expo-image-picker": "~14.3.2",
    "expo-network": "~5.4.0",
    "expo-notifications": "~0.20.1",
    "expo-random": "~13.2.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-updates": "~0.18.19",
    "expo-web-browser": "~12.3.2",
    "firebase": "^9.10.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.10",
    "react-native-color-picker": "^0.6.0",
    "react-native-elements": "^3.4.3",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-gradle-plugin": "^0.71.19",
    "react-native-image-crop-picker": "0.38.1",
    "react-native-image-picker": "^4.10.0",
    "react-native-modal-datetime-picker": "^14.0.0",
    "react-native-open-maps": "^0.4.0",
    "react-native-popup-menu": "^0.16.1",
    "react-native-progress": "^5.0.0",
    "react-native-push-notification": "^8.1.1",
    "react-native-rapi-ui": "^0.2.1",
    "react-native-raw-bottom-sheet": "^2.2.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-searchable-dropdown": "^1.1.3",
    "react-native-svg": "13.9.0",
    "react-native-web": "~0.19.6",
    "react-schedule-selector": "^3.0.0",
    "styled-components": "^5.3.5",
    "yelp-fusion": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.24.5",
    "@testing-library/react-native": "^12.4.3",
    "jest": "^29.7.0",
    "react-native-dotenv": "^3.3.1"
  },
  "private": true,
  "name": "eat-together",
  "version": "1.1.0",
  "description": "Connecting students through shared meals. Our app allows you to create and join food meetups with ease.",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/eat-together-team/eat-together.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/eat-together-team/eat-together/issues"
  },
  "homepage": "https://github.com/eat-together-team/eat-together#readme",
  "type": "commonjs"
}

And this is our new babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo", ['module:metro-react-native-babel-preset', { "useTransformReactJSXExperimental": true }]],
    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "@env",
          path: ".env"
        }
      ],
      "react-native-reanimated/plugin"],
  };
};

I also tried editing index.js to change registerRootComponent(App); to AppRegistry.registerComponent('main', () => App);, but it didn't change anything.

Answer 1

Anyone still having this issue, running the following commands resolved my babel/runtime errors among other package errors after updating to expo 51 from 49:

npm cache verify
npm cache clean --force
rm -rf node_modules/
rm package-lock.json
npm install
npx expo start -c

Answer 2

Sounds like a dependency issue, I imagine when you upgraded to expo 51 did you ran npx expo install --fix and all of the expo libraries where updated also? And after that did you update the react-native libraries? My money is on the react and react-native libraries, you need to check for compatibility with expo 51 and update them.

You can try running npm outdated and see the difference between versions. You will get 3 versions for each package installed: Current, Wanted and Latest. Try to update the react-native libraries to the "Wanted" version.

You could also try running npx expo-doctor@latest. expo-doctor is a nice tool to check the configuration files and libraries version compatibility. See if something wrong with the config files. Way on the bottom you will get a list of the expo-libraries that need updating, you can update them easily with npx expo install --check.

Hope this helps. Sorry I don't have enough reputation points so I commented here.

Answer 3

Thank y'all for commenting! I was able to fix the issue by running npx expo install --fix, then changing my babel.config.js to the following:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "@env",
          path: ".env"
        }
      ],
      "react-native-reanimated/plugin"],
  };
};

I.e. I removed the line ['module:metro-react-native-babel-preset', { "useTransformReactJSXExperimental": true }].