I'm trying to upgrade from 48 to 49. But I get TyperError and Metro errors on managed workflow

Expo SDK
1

Errors result of upgrading from sdk 48 to sdk 49:

TypeError: Cannot read property 'Together' of undefined, js engine: hermes at node_modules/react-native/Libraries/Core/ExceptionsManager.js:105:15
    in reportException at node_modules/react-native/Libraries/Core/ExceptionsManager.js:150:4
    in handleException at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:26:18
    in handleError at node_modules/expo/build/errors/ExpoErrorManager.js:27:16
    in createErrorHandler at node_modules/expo/build/errors/ExpoErrorManager.js:32:8
    in <anonymous> at node_modules/@react-native/js-polyfills/error-guard.js:51:16
    in ErrorUtils.applyWithGuard at http://192.168.0.10:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null
    in metroRequire at http://192.168.0.10:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null
    in global 

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:105:15 in reportException at node_modules/react-native/Libraries/Core/ExceptionsManager.js:150:4 in handleException
* ... 7 more stack frames from framework internals

  expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 14.0
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.17.0 - /usr/local/bin/node
      Yarn: 1.22.19 - ~/.yarn/bin/yarn
      npm: 8.15.0 - /usr/local/bin/npm
      Watchman: 2023.02.06.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
    IDEs:
      Xcode: /undefined - /usr/bin/xcodebuild
    npmPackages:
      babel-preset-expo: ^9.3.0 => 9.5.2 
      expo: ^49.0.0 => 49.0.13 
      metro: ^0.79.1 => 0.79.1 
      react: 18.2.0 => 18.2.0 
      react-dom: 18.2.0 => 18.2.0 
      react-native: 0.72.5 => 0.72.5 
      react-native-web: ~0.19.6 => 0.19.9 
    npmGlobalPackages:
      expo-cli: 5.0.1
    Expo Workflow: managed

It is regarding my react-native-reanimated package and in my package.js the version I’m using is “3.3.0”. I have tried removing the react-native-reanimated package, upgrading to latest or even completely remove the node_modules / yarn.lock and reinstall and still nothing.

Any advise on what is the issue that would be great. Thanks

2

Please run npx expo install --fix

Also, you might need react-native-reanimated if e.g. you’re using React Navigation.
e.g. the documentation for the Drawer navigator says:

If you have a Expo managed project, in your project directory, run:

npx expo install react-native-gesture-handler react-native-reanimated

If running npx expo install --fix doesn’t fix it, please post your package.json as a code block (select it and press the </> button in the forum’s editor toolbar.)

3

Thanks @wodin, but still same errors.

Here is my package.json

{
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
        "eas-build-pre-install": "yarn config set ignore-engines true -g",
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --iOS",
        "web": "expo start --web",
        "eject": "expo eject",
        "test": "jest"
    },
    "jest": {
        "preset": "jest-expo"
    },
    "dependencies": {
        "@babel/preset-typescript": "^7.18.6",
        "@kichiyaki/react-native-barcode-generator": "^0.6.7",
        "@ptomasroos/react-native-multi-slider": "^2.2.2",
        "@react-native-async-storage/async-storage": "1.18.2",
        "@react-native-community/datetimepicker": "7.2.0",
        "@react-native-community/masked-view": "0.1.10",
        "@react-native-community/netinfo": "9.3.10",
        "@react-navigation/bottom-tabs": "^6.5.9",
        "@react-navigation/drawer": "^6.6.4",
        "@react-navigation/native": "^6.1.8",
        "@react-navigation/stack": "^6.3.18",
        "amazon-cognito-identity-js": "^5.2.8",
        "aws-amplify": "^4.3.20",
        "aws-amplify-react-native": "^4.2.6",
        "axios": "^0.19.2",
        "crypto-es": "^1.2.7",
        "crypto-js": "^4.1.1",
        "eas-cli": "2.1.0",
        "expo": "^49.0.0",
        "expo-app-loading": "~2.1.1",
        "expo-barcode-scanner": "~12.5.3",
        "expo-blur": "~12.4.1",
        "expo-camera": "~13.4.4",
        "expo-clipboard": "~4.3.1",
        "expo-constants": "~14.4.2",
        "expo-dev-client": "~2.4.11",
        "expo-font": "~11.4.0",
        "expo-linking": "~5.0.2",
        "expo-local-authentication": "~13.4.1",
        "expo-mail-composer": "~12.3.0",
        "expo-notifications": "~0.20.1",
        "expo-permissions": "~14.2.1",
        "expo-secure-store": "~12.3.1",
        "expo-updates": "~0.18.16",
        "expo-web-browser": "~12.3.2",
        "global": "^4.4.0",
        "jsc-android": "^250230.2.1",
        "jwt-decode": "^3.1.2",
        "lodash": "^4.17.21",
        "moment-timezone": "^0.5.34",
        "qs": "^6.9.4",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-native": "0.72.5",
        "react-native-animated-nav-tab-bar": "^3.1.8",
        "react-native-chart-kit": "^6.12.0",
        "react-native-elements": "^3.2.0",
        "react-native-gesture-handler": "~2.12.0",
        "react-native-modal": "^13.0.1",
        "react-native-pager-view": "6.2.0",
        "react-native-paper": "^3.10.1",
        "react-native-reanimated": "~3.3.0",
        "react-native-router-flux": "^4.2.0",
        "react-native-safe-area-context": "4.6.3",
        "react-native-screens": "~3.22.0",
        "react-native-svg": "13.9.0",
        "react-native-web": "~0.19.6",
        "react-native-webview": "13.2.2",
        "react-navigation-animated-switch": "^0.6.4",
        "react-navigation-drawer": "^2.4.11",
        "react-navigation-header-buttons": "^3.0.5",
        "styled-components": "^5.3.6"
    },
    "resolutions": {
        "@expo/config-plugins": "~7.2.2",
        "@expo/prebuild-config": "~6.2.4"
    },
    "peerDependencies": {
        "@react-navigation/native": "^5.1.4"
    },
    "devDependencies": {
        "@babel/core": "^7.19.3",
        "@babel/parser": "^7.17.9",
        "@babel/runtime": "^7.9.2",
        "@react-native-community/eslint-config": "^0.0.7",
        "babel-jest": "^25.1.0",
        "babel-preset-expo": "^9.3.0",
        "eslint": "^6.8.0",
        "jest": "^29.2.1",
        "jest-expo": "^47.0.0",
        "metro": "^0.79.1",
        "react-native-bundle-visualizer": "^3.1.1",
        "react-test-renderer": "^16.13.1"
    },
    "private": true
}
4

The “community” version of MaskedView is deprecated. You should switch to @react-native-masked-view/masked-view

You probably don’t want both of these installed.

This should not be installed as a dependency. It should only be installed globally.

This is no longer available. It was deprecated in Expo SDK 45.

From the SDK 45 release blog post:

expo-app-loading is deprecated — use expo-splash-screen directly instead: SplashScreen.preventAutoHideAsync() and SplashScreen.hideAsync(). The implementation is only a thin wrapper around expo-splash-screen that you can copy into your project if you’d like to keep using it.

This is no longer available. It was deprecated in Expo SDK 41 and has been replaced by module-specific permission methods.

From the Expo SDK 41 release blog post:

expo-permissions has been deprecated in favor of module-specific permissions methods

You should migrate from using Permissions.askAsync and Permissions.getAsync to the permissions methods exported by modules that require the permissions. For example: you should replace calls to Permissions.askAsync(Permissions.CAMERA) with Camera.requestPermissionsAsync(). There shouldn’t be two ways to do an identical thing in a single SDK, and so we picked our preferred approach and are consolidating around it.

This looks like something you might have installed accidentally?

Do you need this? It looks like it’s for building JavaScriptCore, so shouldn’t be a dependency. At best it should be a devDependency. But I suspect you should uninstall it.

As per react-navigation-animated-switch - npm

This
package is no longer supported. Please use @react-navigation/stack
instead. See https://reactnavigation.org/docs/stack-navigator/ for usage
guide

As per react-navigation-drawer - npm

This
package is no longer supported. Please use @react-navigation/drawer
instead. See https://reactnavigation.org/docs/drawer-navigator/ for
usage guide

I see the latest version of this is 11.0.1, so it might be a good idea to upgrade, but off hand I don’t know whether the old version will cause problems.

Why do you have these here? It indicates a possible conflict in your dependencies.

    "dependencies": {
// ...
        "@react-navigation/native": "^6.1.8",
// ...
    },
// ...
    "peerDependencies": {
        "@react-navigation/native": "^5.1.4"
    },

Why do you have @react-navigation/native in peerDependencies?

You should be able to uninstall this. I believe it’s handled by @babel/core these days.

1 Like
5

@wodin, thanks. I need to look over each of my dependencies in package.js and check each for the compatibility with the latest sdk.

6

All fixed @wodin. Issue was to replace the reanimated package with stackNavigator package.

7

I’m glad you got it working

1 Like
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.