javascript bundle error with "Transformer.transform is not a function" after upgrading to expo SDK 38 and expo-cli 3.22.3

I have recently upgraded to the latest expo SDK version 38 from 36, the latest expo-cli 3.22.3, and the latest node js v14.6.0. I have upgraded the SDK with expo upgrade and then running npm install to install the dependencies.

Error : Building JavaScript bundle: error: node_modules/expo/AppEntry.js: Transformer.transform is not a function

Versions

  1. SDK v38
  2. expo-cli v3.22.3
  3. node js v14.6.0

platform
IOS

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint src -c .eslintrc.json --ext js,jsx"
  },
  "dependencies": {
    "@expo/metro-config": "^0.1.16",
    "@react-navigation/native": "^5.0.0-alpha.22",
    "@use-expo/font": "^2.0.0",
    "expo": "^38.0.3",
    "expo-constants": "~9.1.1",
    "expo-contacts": "~8.2.1",
    "expo-image-picker": "~8.3.0",
    "expo-local-authentication": "~9.1.1",
    "expo-notifications": "~0.3.3",
    "expo-permissions": "~9.0.1",
    "expo-sms": "~8.2.1",
    "lodash.debounce": "^4.0.8",
    "lodash.memoize": "^4.1.2",
    "lodash.orderby": "^4.6.0",
    "lottie-react-native": "~2.6.1",
    "mem": "^6.0.1",
    "moment": "^2.24.0",
    "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-animatable": "^1.3.3",
    "react-native-elements": "^1.2.7",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-keyboard-accessory": "^0.1.10",
    "react-native-modal": "^11.5.3",
    "react-native-reanimated": "^1.9.0",
    "react-native-screens": "^2.8.0",
    "react-native-smooth-pincode-input": "^1.0.9",
    "react-native-svg": "^12.1.0",
    "react-native-vector-icons": "^7.0.0",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "1.10.3",
    "react-navigation-tabs": "^2.7.0",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "babel-preset-expo": "^8.2.3",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-node": "^4.0.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^1.7.0",
    "husky": "^3.1.0",
    "metro": "^0.61.0",
    "prettier": "^1.19.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  },
  "private": true
}

app.json

{
  "expo": {
    "name": "test",
    "slug": "test",
    "privacy": "public",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "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
    }
  }
}

Hey @amumu,

This is likely a problem with metro or your metro configuration. I would recommend reading the comments in this github issue and see if it helps resolve the error. https://github.com/facebook/react-native/issues/29301

Cheers,
Adam

1 Like

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.

Glad to hear you got things sorted out, @amumu! Thanks for sharing your findings with the rest of us as well.

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