Solution to Phase Script Execution Error — React Native

Photo by Goran Ivos on Unsplash

NOTE: Skip down to “Solution” if you just need the fix to the error.

I recently decided to try my hand at building a basic iOS mobile app. Given that I have previous knowledge of React, I decided it would be best to build the app using React Native. I used React Native documentation to set up my computer environment.

NOTE: if you want to develop a proper iOS app, you will need a Mac. There is a way to do it with Windows using Expo, but it's not as good for production apps per React native’s documentation.

The only difference between my setup and the documentation was that I already had Node installed on my computer, so I did not need to install it via Homebrew. After getting Xcode set up as well, I ran the commands to start up Metro and then the app which would run in an iPhone Simulator. However, every time it would try and build, I would run into:

PhaseScriptExecution [CP-User]\ ... Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-1F0D93C9412E4439D9C46216EB143B15.sh

I tried researching the problem and there were a lot of “solutions” offered but none of them were really working or seemed exactly like the problem I had. It was definitely a little frustrating because I followed the documentation exactly. Finally, I found an answer through StackOverflow that worked for me so I wanted to share in case anyone has the same issue. The error seems to be due to NVM because if you run your project in Xcode, it should work.

In the error, you will see it say something similar to :

nvm is not compatible with the "PREFIX" environment variable: currently set to <some path here>
Run `unset PREFIX` to unset it.

We are going to work with this to provide a temporary patch to this issue until it can be resolved on NVM’s side.

Solution

First, open up your project directory. Navigate through the following folders: node_modules > react-native > scripts. Then, open the find_node.sh file. At the very top of the page insert the following lines of code

unset npm_config_prefix
unset PREFIX
...

Save these changes. Finally, we want to make these changes sticky. To do this we are going to use the Patch-package package. To set this up, open your package.json and add:

"scripts": {
  "postinstall": "patch-package"
 }

Then run:

// npm users
npm i patch-package
// yarn users
yarn add patch-package postinstall-postinstall

After it has been installed, to make the changes we made above stick, we run the following code. Here for package-name use “react-native” because it matches the node_modules folder where we made our changes:

//npm users
npx patch-package <package-name>
// yarn users
yarn patch-package <package-name>

NOTE: if this is the first time you are running this command, it will create a folder in the root directory of your application called patches.

Now when you run the commands:

// Terminal 1
npx react-native start
//Terminal 2
npx react-native run-ios

You should successfully build the app, and it will appear in the iPhone Simulator!