React-Native: React could not be found within project or in these directories

Question

We have upgraded our react native project to the latest react native version (v0.61.2) with react (16.9.0) and it works perfectly fine on android. When we try to run it on ios thought, we get the message:

warning: the transform cache was reset. Loading dependency graph, done. error: bundling failed: Error: Unable to resolve module `React` from `ios/Pods/React/Libraries/react-native/react-native.js`: React could not be found within the project or in these directories:   node_modules

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*

We have followed the upgrade guide, updated all dependencies to their latest version and updated the pods. I actually don't know where or how to start debugging this, since this seems to be coming from the Pods folder.

This is the content of our Pods folder:

ls ios/Pods/
Adjust              GoogleDataTransport
Crashlytics         GoogleDataTransportCCTSupport
DoubleConversion        GoogleUtilities
Fabric              Headers
Firebase            Local Podspecs
FirebaseABTesting       Manifest.lock
FirebaseAnalytics       Pods.xcodeproj
FirebaseAnalyticsInterop    Protobuf
FirebaseCore            Pushwoosh
FirebaseCoreDiagnostics     PushwooshInboxUI
FirebaseCoreDiagnosticsInterop  React
FirebaseDynamicLinks        Target Support Files
FirebaseInstanceID      boost-for-react-native
FirebaseRemoteConfig        glog
Folly               nanopb
GoogleAppMeasurement

and in our node_modules folder, we have (with a lot more other packages):

...
react
depd                        react-deep-force-update
des.js                      react-devtools-core
destroy                     react-is
detect-libc                 react-lifecycles-compat
detect-newline              react-native
...

I have, of course, tried all the steps, like clearing caches, reset-cache, clearing DerivedData, Clean and build, ... I don't know where to start looking.

Answer 1

I fixed it by replacing

import Foobar from "screens/foobar";

with

import Foobar from "./screens/foobar";

note the beginning ./ in the path

Answer 2

I was facing the same error when upgrading from v0.60.3 to v0.61.4.

I needed to change

import React, { Component } from 'React';

to

import React, { Component } from 'react';

Notice the lowercase 'r'.

Answer 3

Try to delete both Pod folder and Podfile.lock, under ios directory. Then run pod install again.

That worked for me.

Answer 4

I know this isn't an optimal solution, however I spent over a week on this going down the rabbit hole to no avail. In the end I generated a new RN project, copied over my app folder and reinstalled about 20 packages which I use, and then copied my old App.js, index.js, AndroidManifest, Appdelegate.m, Info.plist, build.gradle x 2, icons and XIB, and some misc installation instructions for modules, i.e. FBSDK and Firebase. It now all works fine. It seems that something in the manual process of updating all those files to get from <0.60 to >0.60 causes an issue for some. Note that this recreation took about 8 hours.