React-native: "index.js: Transformer.transform is not a function"

[popdorin]

Description

After upgrading react-native from 0.48.3 to 0.62.2 I get the error when running "react-native run-ios" command: "index.js: Transformer.transform is not a function".

React Native version:

System:
OS: macOS 10.15.1
CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
Memory: 75.33 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.16.3 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
Languages:
Java: 11.0.7 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: ^16.11.0 => 16.11.0
react-native: ^0.62.2 => 0.62.2
npmGlobalPackages:
react-native: Not Found

[github-actions[bot]]

Do you need help upgrading to a newer React Native version? Visit the Upgrade Support repository or use the upgrade helper to see the changes that need to be made to upgrade your app.

[SudoPlz]

@popdorin Why was this closed? Did you figure out the solution?

I'm experiencing the same issue.

Thanks

[popdorin]

@SudoPlz I'm not sure why this was closed but I didn't find the solution yet. I used the upgrade helper but I still get the same error.

[rgreen33]

I'm getting this same error on a new install (new MacBook Pro). Did anyone find a solution?

[abouquet]

Same there ... Using upgrade helper to align versions, and still doesn't work

[rgreen33]

@abouquet I was finally able to get around the errors (after a lot of digging and searching). As I mentioned, my issue started when I attempted to set my app up on a new laptop...which had the latest install of React Native (0.63). Here are the steps that got me back up and running (once I made it past the transformer error, I started getting a swift error, so the steps below include the fix for that too):

1. Pulled a fresh copy of my code from our on-prim GitHub server.
2. Ran the following command to install my node modules: npm install
3. Ran the following command to install pods: npx pod-install (from ios folder)
4. Ran the following command on my project: npx react-native upgrade
5. Checked for outdated modules by running the following: npm outdated
6. Modified package.json file to update outdated modules and then ran: npm install
7. Once everything was updated, I deleted the node_modules folder and re-ran npm install to get a fresh install of all current modules.

Now, I turned my attention to the pod files

1. With React Native 0.63, I created a new AwesomeProject app...so that I could get a copy of the new Podfile format.
2. I deleted Podfile.lock file and entire Pods folder.
3. I replaced my Podfile with the new formatted file from my newly created AwesomeProject app...replacing the app name throughout the file.
4. Once the new Podfile was in place, I ran the following: nix pod-install.

Now, this is where I started getting the swift linking errors. You can read more about the details here (https://stackoverflow.com/questions/50096025/it-gives-errors-when-using-swift-static-library-with-objective-c-project/56187043#56187043). To get around this, I had to do the following:

1. Per the URL, I had to add an empty Swift file and let Xcode "Create Bridging Header".

I continued to get errors for my "tests", so I had to make one additional change.

1. In Podfile, I added the following under my target 'projectTests": inherit! :search_paths

The above steps worked for me. Good luck!

[abouquet]

thanks @rgreen33 for your detailed explanation !

I will try theses steps asap.

[kmocorro]

Having similar issue on Windows.

[automatensalat]

For us this 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 our case we upgraded to [email protected] and also upgraded metro-config to 0.61, although react-native depended on 0.58. This caused the metro version used by the react-native CLI to try to load a transformer module from a path that does not exist for 0.58, returning undefined from the require call, leading to the error in question.

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

[answer-huang]

For us this 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 our case we upgraded to [email protected] and also upgraded metro-config to 0.61, although react-native depended on 0.58. This caused the metro version used by the react-native CLI to try to load a transformer module from a path that does not exist for 0.58, returning undefined from the require call, leading to the error in question.

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

worked for me , this save my life !

[jcczmetal]

Hey, I had the same issue. Here is my solution:

• If you are running npx react-native start, just stop it.
• Run npm outdated
• Updated in package.json the Wanted versions. Her is my configuration: "devDependencies": { "@babel/core": "^7.11.1", "@babel/runtime": "^7.11.2", "@react-native-community/eslint-config": "^1.1.0", "babel-jest": "^25.5.1", "eslint": "^6.8.0", "jest": "^25.5.4", "metro": "^0.61.0", "metro-core": "^0.61.0", "metro-react-native-babel-preset": "^0.59.0", "react-test-renderer": "16.13.1" }
• Then delete the node_modudes folder
• Run npm install
• Run npx react-native start
• Run npx react-native run-ios in new terminal.

[mrousavy]

I'm still experiencing this problem. No clean or install helped!

EDIT: Nevermind, I still had the old version in cache. @automatensalat you saved my life.

[acomia]

del %appdata%Tempreact-native-* & cd android & gradlew clean & cd .. & del node_modules/ & npm cache clean --force & npm install & npm start -- --reset-cache

try to run this on your cmd.

It work for me.

[vjpr]

For an explanation of the cause of the issue see here: https://github.com/facebook/metro/issues/617