Unable to resolve modules after upgrade to SDK 44

Expo SDK
1

I’m attempting to upgrade from SDK 43 to 44 and getting the following error…

Unable to resolve module react-native-vector-icons/FontAwesome
from /home/dan/latestexpo/node_modules/react-native-elements/src/social/SocialIcon.js: react-native-vector-icons/FontAwesome could not be found within the project or in these directories:
  node_modules/react-native-elements/node_modules
  node_modules

Within node_modules I have…

./node_modules/@types/react-native-vector-icons
./node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons

I’ve now done…

expo install react-native-elements
expo install react-native-vector-elements

but now get a different error…

node_modules/react-native-gesture-handler/src/handlers/gestures/GestureDetector.tsx: /home/dan/latestexpo/node_modules/react-native-gesture-handler/src/handlers/gestures/GestureDetector.tsx: Cannot find module '@babel/preset-typescript' from '/home/dan/latestexpo'

My package.json is…

{
  "name": "my-new-project",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "test": "node ./node_modules/jest/bin/jest.js --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "2.1.1",
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/netinfo": "7.1.3",
    "expo": "^44.0.0",
    "expo-app-loading": "~1.3.0",
    "expo-application": "~4.0.1",
    "expo-asset": "~8.4.6",
    "expo-constants": "~13.0.1",
    "expo-device": "~4.1.0",
    "expo-notifications": "~0.14.0",
    "expo-secure-store": "~11.1.0",
    "expo-updates": "~0.11.7",
    "expo-web-browser": "~10.1.0",
    "mobx": "4.4.0",
    "mobx-react": "5.2.5",
    "mobx-state-tree": "2.2.0",
    "moment": "^2.22.2",
    "react": "17.0.1",
    "react-native": "0.64.3",
    "react-native-accordion": "^1.0.1",
    "react-native-calendar-picker": "^5.22.0",
    "react-native-calendars": "^1.21.0",
    "react-native-collapsible": "^1.3.0",
    "react-native-datepicker": "^1.7.2",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-hyperlink": "0.0.19",
    "react-native-maps": "0.29.4",
    "react-native-picker-select": "^4.4.0",
    "react-native-reanimated": "~2.3.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-uuid": "^2.0.1",
    "react-native-vector-icons": "^9.2.0",
    "react-navigation": "^4.4.3",
    "react-navigation-drawer": "^2.6.0",
    "react-navigation-stack": "^2.10.2",
    "react-navigation-tabs": "^2.10.1",
    "sentry-expo": "^4.0.0",
    "whatwg-fetch": "^2.0.4",
    "ws": "^3.3.1"
  },
  "devDependencies": {
    "jest-expo": "^44.0.0"
  }
}

and my environment is…

Expo CLI 4.13.0 environment info:
    System:
      OS: Linux 5.13 Ubuntu 20.04.5 LTS (Focal Fossa)
      Shell: 5.0.17 - /bin/bash
    Binaries:
      Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
      Yarn: 1.22.17 - /usr/local/bin/yarn
      npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
    npmPackages:
      expo: ^44.0.0 => 44.0.6 
      react: 17.0.1 => 17.0.1 
      react-native: 0.64.3 => 0.64.3 
      react-navigation: ^4.4.3 => 4.4.3 
    Expo Workflow: managed

Any guidance on how to proceed would be much appreciated.

Dan

2

Sorry, I forgot to add that the module does exist in my node_modules…

./node_modules/jscodeshift/node_modules/@babel/preset-typescript

3

Hi @buxtonfringe

Your devDependencies should include "@babel/core"

In a newly created Expo SDK 46 app I get this:

  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
4

I get the same error I’m afraid.

But I’ll try starting with a new SDK 44 app and building up and see if that helps.

As a matter of interest do you have any thing in babel.config.js. Mine is…

module.exports = {
presets: [‘module:metro-react-native-babel-preset’],
plugins: [‘react-native-reanimated/plugin’],
};

Thanks for the reply

Dan

5

The default one looks like this:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

But react-native-reanimated needs this added (as you have done):

    plugins: ['react-native-reanimated/plugin'],

I suggest you try the default + the reanimated plugin.

If that doesn’t fix it, do as you suggested. Make a new app with npx create-expo-app -t blank@sdk-44 or yarn create expo-app -t blank@sdk-44 and then either make it more and more like your real app until it breaks in the same way, or make your real app more and more like the new app until it works :slight_smile:

Good luck

6

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