error: bundling failed: TypeError: Cannot read property 'transformFile' of undefined, React Native

user_8396834 0
Viewed 15918

I receive this error whenever I run react-native start, but this started happening recently after I had installed firebase-tools and stripe in my node modules, but before that it would run just fine, also here's the error's stacktrace: 

::ffff:127.0.0.1 - - [22/Mar/2020:19:59:30 +0000] "GET /index.bundle?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.12.1"
error: bundling failed: TypeError: Cannot read property 'transformFile' of undefined
    at C:\Users\me\Project\node_modules\react-native\node_modules\@react-native-community\cli\node_modules\metro\src\Bundler.js:87:34
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\me\Project\node_modules\react-native\node_modules\@react-native-community\cli\node_modules\metro\src\Bundler.js:14:24)
    at _next (C:\Users\me\Project\node_modules\react-native\node_modules\@react-native-community\cli\node_modules\metro\src\Bundler.js:34:9)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

Here's my package.json: 

{
  "name": "Project",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "card-validator": "6.2.0",
    "firebase-tools": "7.15.1",
    "jetifier": "^1.6.5",
    "prop-types": "15.7.2",
    "react": "^16.13.1",
    "react-art": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-geocode": "0.2.1",
    "react-native": "0.61.5",
    "react-native-country-picker-modal": "1.9.8",
    "react-native-elements": "1.2.7",
    "react-native-firebase": "5.6.0",
    "react-native-geocoding": "0.4.0",
    "react-native-gesture-handler": "1.5.2",
    "react-native-maps": "0.26.1",
    "react-native-paper": "3.2.1",
    "react-native-reanimated": "1.4.0",
    "react-native-restart": "0.0.14",
    "react-native-shadow": "^1.2.2",
    "react-native-svg": "12.0.3",
    "react-native-vector-icons": "6.6.0",
    "react-native-web": "^0.9.13",
    "react-navigation": "4.0.10",
    "react-navigation-drawer": "2.3.3",
    "react-navigation-stack": "1.10.3",
    "stripe": "^8.33.0",
    "tipsi-stripe": "7.5.1",
    "typescript": "^3.8.3"
  },
  "devDependencies": {
    "@babel/core": "7.7.4",
    "@babel/runtime": "7.7.4",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "^5.0.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.3",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

I am also well aware of another question that has the same problem on StackOverflow, but that question's solution didn't work for me, because npm ignored it when i ran react-native start since those modules were deprecated, and I still got the same error

firebase react-native eslint javascript
8 Answers

Downgrading NodeJS to LTS version always helps. I faced same issue when I was trying on the NodeJS^17 but when I downgraded it to NodeJS^14 and reinstalled node_modules everything was fixed.

user_82432440

The solution in the first comment under the question worked for me, which was deleting the node_modules and package-lock.json, HOWEVER, I didn't want to do this knowing i would run into more errors, and sure enough I did, but at least I was able to fix them and get it to run, unlike the stubborn error I asked about. So yes, this method works, but I definitely hope that someone has a better way.

user_83968340

I was having this error. I did two things which I think led to me fixing this issue:

  • I'm working in a monorepo so I added the following code to my package.json:
"workspaces": {
    "nohoist": [
        "react-native",
        "react-native/**",
        "react",
        "react/**"
    ]
}
  • I upgraded my metro-react-native-babel-preset package from ^0.58.0 to the latest version - ^0.59.0 (yarn add -D metro-react-native-babel-preset)
user_119939420

This is an old thread but I wanted to contribute as it is one of the first threads that appears in Google when searching "Cannot read property 'transformFile' of undefined".

This might not be a permanent fix as it seems to crop up when installing new dependencies, I'm also using Expo.

To fix this I've been installing the dependency, then using yarn-upgrade-all which goes through your package.json and upgrades them all to the latest version. This can obviously cause conflicts but for my use, it's working (so far) and doesn't require something drastic like deleting folders or files.

user_122818070

I have the same problem with Nodejs version 17.1.0. Just uninstalled it and reinstall Nodejs version 16.13.0.

user_80729960

I had the same issue. I was running npm v7. and node v10. I upgraded both to latest, and it started working.

user_4600560

This error happened to me when I was using the inline require in metro config for performance optimization.

I solve this problem changing the metro config property "blacklist" to "blockList":

   return {
    preloadedModules: moduleMap,
    transform: { inlineRequires: { blockList: moduleMap } },
  }
user_104158690 
rm -rf node_modules
yarn
pod install
user_18469930
Related