React-native: RN 0.42.0 iOS 'Lexical Preprocessor Issue'. React header files not found.

[ericcastro92]

Description

Fresh RN project initializations have been failing to build and run for me. I have been facing this issue for about a week and a half and tried several different things. I simply cannot get a React Native project to build on my machine. Header files cannot be found for whatever reason. Any help would be very appreciated.

Reproduction

react-native init testproject
open Xcode project
Clean project
Build project
Build fails

Error screenshots:

Additional Information

• React Native version: 0.42.0
• Platform: iOS (Xcode 8.2.1)
• Operating System: MacOS Sierra

[ericvicenti]

Yikes. Are you on the most recent version of Xcode? Maybe try deleting xcode's derived data folder?

Does it work to run react-native run-ios?

[ericcastro92]

Thank you for the quick reply! It does not work with react-native run-ios. It actually produces a ":CFBundleIdentifier", Does Not Exist error. I'm not sure if that's because I'm trying to run it on port 8999 since McAfee takes over 8101 on my laptop.

Just tried clearing derived data, no dice. Only difference is inside of the RCTImage library can no longer be found now.

EDIT:
Also, yes, I'm on the latest version of Xcode (8.2.1)

[ericcastro92]

Cleaned and rebuilt again but this time got some new issues. This is after running react-native link.

This time it's inside of RCTActionSheet that can't be found.

[fuleshu]

I have the same issue. I also tried the the 0.43 rc1. Just creating a new project with init and try to run on ios.
All react libraries cannot resolve the paths starting with Doesn't work on the command line or from XCode.
The last React Native version I am able to run is 0.39.2.
All versions after have this issue for me.
I have macOS Sierra (10.12.3) and XCode 8.2.1.

Could my XCode settings be messed up? Any help would be awesome.

[zhihuitang]

same errors here:

.../node_modules/react-native/Libraries/Settings/RCTSettingsManager.h:12:9: 'React/RCTBridgeModule.h' file not found
.../node_modules/react-native/Libraries/Text/RCTRawTextManager.h:10:9: 'React/RCTViewManager.h' file not found
.../node_modules/react-native/Libraries/Geolocation/RCTLocationObserver.h:10:9: 'React/RCTEventEmitter.h' file not found
.../node_modules/react-native/Libraries/WebSocket/RCTWebSocketModule.h:10:9: 'React/RCTEventEmitter.h' file not found

[ilp2020]

There is a solution here https://github.com/facebook/react-native/issues/12333

[fuleshu]

Unfortunately the solution described there didn't work for me.

[fuleshu]

This is obviously a problem with the libraries not finding the include paths from React. I don't know much about Xcode and mac development and for someone from the React-Native team there might be an easy and obvious fix, but unfortunately we didn't hear anything from them.

So by analyzing the react-native < 40 Xcode settings and trying to understand the Xcode include path system I came up with a solution that works for me:

In the Xcode project tree select the React.xcodeprj and inside select Build Phase.
Then find the section Copy Header and change the Subpath to ../include/React

Now in every other Library open the project settings Build Settings.
Then find the section Search Paths and set Header Search Paths to
$(SRCROOT)/../../ReactCommon/** $(SRCROOT)/../../React/build/include/**

Now for the project settings of the actual project set this value to
$(SRCROOT)/../node_modules/react-native/ReactCommon/** $(SRCROOT)/../node_modules/react-native/React/build/include/**

Unfortunately this fix doesn't work the test target, so I just delete it from the product scheme:
Open Product -> Scheme -> Edit Scheme...
Then select Build and remove the test target.

Now building and running the project should work.

[ghost]

I can build Debug scheme and Release scheme, but yes, Test scheme doesn't work, it always show this error: React/RCTRootView.h file not found

Does anyone know the workaround for this issue in Test scheme? We have to rollback to version0.39 because of it :(

[fuleshu]

Are you referring to my solution? The Test scheme does not work because the relative path is not fitting there. An easy workaround would be using an absolute path in the settings for the actual project.

[zhihuitang]

hi Fuleshu,
thanks for your solution. But what is the "every other Library"? Could you please give some more details. thank you.

Now in every other Library open the project settings Build Settings.
Then find the section Search Paths and set Header Search Paths to
$(SRCROOT)/../../ReactCommon/* $(SRCROOT)/../../React/build/include/*

[fuleshu]

In Xcode on the left side, click on the folder icon, then you have the project explorer (or however this is called in Xcode).
Inside this tree view you have the Library folder. Expand this and you see a bunch of .xcodeproj. There you find the the react library React.xcodeproj and a number of libraries starting with RCT, e.g. RCTSettings.xcodeproj. All the ones starting with RCT I mean as other libraries. By clicking on them you open the settings for the library and can make the changes that I described.

[zhihuitang]

OK, In my case, all RCT*.xcodeproj are in frameworks folder.
I will have a try. thanks

[zhihuitang]

Here is how I fixed it.

http://stackoverflow.com/questions/42158178/react-native-base-headers-for-ios-not-found/42700452#42700452

The solution is to add a same configuration in React.xcodeproj to match the one of your project.
For example, if you have "Debug/Release/Test/AppStore" 4 configurations in your own project, you have to make sure React.xcodeproj has the same 4 configurations.

please Click the "+" button of Configurations, "Duplicate Release Configuration, and rename it according to you need.

[ericcastro92]

Tried everything in this thread so far, including manually adding the search paths but nothing seems to be working. Are there any ideas as to why this might be occurring?

[fuleshu]

I think I know why this happens.
In react native < 0.40 the import path was just the filename, e.g.:
#import <RCTDefines.h>

To find the includes in the header search path of the library was added <yourproject>/node_modules/react-native/React/** which means it includes all the subdirectories in this path. This way the file was found.

Now for whatever reason the team decided they need an import path that includes a React therefore since react-native 0.40 the path is:
#import <React/RCTDefines.h>
But if you look for the file, you will find it in the directory React/Base/RCTDefines.h. That way the old header include would not work anymore.

Now the trick to solve this is to include a Copy Header phase in the Build Phase of the React project. This copies all header files flat in a new directory. Now this directory must be called 'React'.
Now the libraries must include the path that contains this new React directory then they will find the new import path.

What puzzles me now, is that the projects created from react-native > 0.40 have this copy header phase added, but the header include path for all libraries is empty. I don't know if the team simply forgot to make this right and nobody is testing it, or if there is another magic that should make it work and just fails for a few people like us for whatever reason.

So what you have to fix is that the path where the headers from the react project are copied to is included as header search path for each library.

Additionally you need to do what @the-ant pointed to. That is in the Scheme disable parallel build and add React at a build target before your project. This is necessary to ensure, that the headers are copied first before the other libraries are build.

[ammichael]

This issue is dragging me for two days already. I've tried everything you guys mentioned here, all the Twitter/Stack Overflow screenshots, but nothing seems to work. My debug scheme is working fine, but when I switch to release it complains about lexical issue.

I'm not sure how the debug scheme works fine and release don't.

Also, is it just me or every RN update seems to be a pain?

[fuleshu]

Well, if you check:
http://isitmaintained.com/project/facebook/react-native
you see a resolution time of 24 days, which is really bad. React itself for example only has 21h!
I really wish the react-native team would stop the monthly releases and focus on bug fixing for while.

For me building a release version also works after the discussed fixes. Perhaps double check that when entered the header search paths that you didn't enter them for the debug version only.
You could also check if the headers are really copied to the path specified in Build Phase of the React project. Look for them in Finder and then check if that path is added correctly in the header search path of the library that is not compiling.
Also make sure that React is compiled first.

I was also able to build an archive and entered it for app store submission.

[ammichael]

What I did to solve, after trying everything described here:

Created a new project with react-native init using the same name as my actual project, copied the iOS folder to my actual project.

At first I updated the project with Xcode's recommended settings, but have problems anyway. Tried again without applying the updates and worked, finally, fine.

[aiDove]

RN-0.43.1 have the same issue.

[PadmaPreethi]

RN-0.43.3 has the same issues. Unable to find React headers. Tried disabling the parallelize build options as well as adding React as one of build variants.But still the same.

[ericcastro92]

Unfortunately none of these solutions ended up working for me. What did work was my laptop crashing and getting a new one. My best guess is that there was some sort of deep configuration conflict with Xcode or RN that was causing the issue. This would also explain why we all seem to have several different encounters/solutions with the issue.

[lildemon]

Make sure in the Scheme Editor's build configuration, add React target and it's order is before your own target

[calvin]

[email protected] has the same issue.

UPDATE:
works well with new installation of Xcode. (and different machine and different OS... etc)

[javayhu]

I tried the solution in here: https://twitter.com/skellock/status/818813810781908992, and the problem solved. Remember to disable parallelize build in scheme configuration and add React target before your own project target. Hope it helps.

Additional information:
React Native version: 0.44.0
Platform: iOS (Xcode 8.3.2)
Operating System: MacOS Sierra

[hramos]

It looks like people have found reasonable workarounds. Closing as there doesn't seem to be a particular list of repro steps we can follow to verify this is definitely fixed. I encourage anyone running into this to open a new issue so we can get a fresh set of repro steps. Feel free to link back to this issue when filling out the template.

[pie6k]

For me -
rm -rf node_modules watchman watch-del-all rm -fr $TMPDIR/react-*, restart xcode, rm -fr $TMPDIR/react-* helped.