node_modules/expo/AppEntry.js: Transformer.transform is not a function

Question

I've been looking for a solution to this problem for a couple of days now and I think it has something to do with my upgrade to the latest version of expo. I've tried downgrading the SDK and expo version, deleting my node_modules and package-lock and reinstalling. I've added in SourceExts to my app.json.

Any help would be appreciated. The app works in the web browser but won't build for iOs or android simulators.

app.json

{
  "expo": {
    "name": "GotThis",
    "slug": "GotThis",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "packagerOpts": {
      "sourceExts": ["js", "json", "ts", "tsx", "jsx"]
    }
  }
}

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~38.0.8",
    "expo-status-bar": "^1.0.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-elements": "^2.0.4",
    "react-native-paper": "^4.0.1",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "babel-preset-expo": "^8.1.0",
    "jest-expo": "^38.0.2",
    "metro": "^0.60.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "^16.13.1"
  },
  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ]
  },
  "private": true
}

node_modules/expo/AppEntry.js

import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from '../../App';

registerRootComponent(App);

Error in the android emulator android error

Answer 1

After much research, I have come to a conclusion where the problem was caused by a version mismatch of the metro-config package. if you depend on this in your app to override some default metro configuration you should make sure it's the same version react-native depends on. In my case, I was using [email protected] and since [email protected] depends on [email protected] all I did is I downgraded the metro version from @0.61.0 to @0.58.0.

You can check which versions are required and installed by running npm ls metro-config or searching the package-lock.json file.

I have followed this useful thread which you can check out if this solution didn't work for you.