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

user_12683625 0
Viewed 4515

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

react-native-ios expo react-native sdk
3 Answers

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 metro@0.61.0 and since react-native@0.62.2 depends on metro@0.58.0 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.

user_110742470 
npm ls metro-config

In my case, I changed my version of the metro from 0.65.0 to 0.56.4 and fixed the issue. ubuntu here.

enter image description here

user_24331810

@amo gave a good direction. Just to expand on that answer with details:

  1. Check metro-config dependency tree by running npm ls metro-config. You should get something similar to this:
npm ls metro-config   
my_app@ /Users/home/my_app
├─┬ metro@0.66.2
│ └── metro-config@0.66.2
└─┬ react-native@0.63.2 invalid: "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz" from the root project
  └─┬ @react-native-community/cli@4.14.0
    ├─┬ metro-config@0.59.0
    │ └─┬ metro@0.59.0
    │   └── metro-config@0.59.0 deduped
    └─┬ metro@0.59.0
      └── metro-config@0.59.0 deduped
  1. Notice that react-native depends on version 0.59.0 of metro-config? Run npm install metro-config@0.59.0. This will install and give precedence to the version supported by the react-native version.
  2. Delete package.lock.json file and node-modules folder.
  3. Run npm install
  4. All fixed, start your app
user_41749930
Related