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

Question

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

Answer 1

I was getting the same error, After doing some search I found something. I go to root folder of project in terminal and run this below mentioned command and after this I run 'npm start' command.

export NODE_OPTIONS=--openssl-legacy-provider

Answer 2

Downgrading node to version 14 will do the fix

Answer 3

rm -rf node_modules
yarn
pod install

Answer 4

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

Answer 5

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.

Answer 6

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.

Answer 7

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 } },
  }

Answer 8

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

Answer 9

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)

Answer 10

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.