Failure to Generate iOS React Native 0.72.12 Project in Custom Directory

[ywqqqqq]

Description

If the project structure follows the one below, running pod install is successful:

└── guideProgram
⠀⠀⠀⠀⠀├── package.json
⠀⠀⠀⠀⠀├── node_modules
⠀⠀⠀⠀⠀└── ios
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── Podfile

However, when the structure is customized as follows:
└── myProgram
⠀⠀⠀⠀⠀├── rn
⠀⠀⠀⠀⠀├── ├── node_modules
⠀⠀⠀⠀⠀├── └── package.json
⠀⠀⠀⠀⠀└─ ios
⠀⠀⠀⠀⠀⠀⠀⠀└── Podfile

It results in an error message:
"[!] Invalid Podfile file: undefined method `prepare_react_native_project!' for #Pod::Podfile:0x00007f8733259588."

It has been bothering me for several days now！

Steps to reproduce

1. Install React Native 0.72.12
2. Customize project structure
3. Copy the Podfile from Upgrade Helper.
4. Run "pod install".

React Native Version

0.72.12

Affected Platforms

Runtime - iOS, Build - MacOS

Output of npx react-native info

no info.ddd

Stacktrace or Logs

no trace.

Reproducer

http://www.github.com

Screenshots and Videos

No response

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.13. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[GStar718]

Here are a few suggestions that might help:

1. Check Your React Native Version: Make sure you're using the correct version of React Native. Some users have reported similar issues with certain versions of React Native.

2. Check Your Project Structure: The structure of your project might be causing the issue. React Native expects a certain project structure, and if your project doesn't match this structure, it might cause problems. Make sure your node_modules directory and package.json file are in the correct locations.

3. Check Your Podfile: The error message suggests there might be an issue with your Podfile. Make sure your Podfile is correctly configured. You might want to try copying the Podfile from a working project or from the React Native Upgrade Helper.

4. Try a Clean Install: Sometimes, issues can be resolved by doing a clean install. Delete your node_modules directory and your Podfile.lock file, then run npm install or yarn install, followed by pod install.

5. Check for Updates: There might be updates or patches available that fix this issue. Check the official React Native GitHub page or community forums for information about any recent updates or fixes.

You can switch between different Node.js versions using Node Version Manager (NVM). Here are the steps: "This has worked wonders for me while using React Native as the nvm -version is constantly switching"

1. Install NVM: If you haven't installed NVM yet, you can find the installation instructions on the [NVM GitHub page].

2. List installed Node.js versions: Use the command nvm ls to list all Node.js versions installed on your machine.

3. Switch Node.js version: To switch to a specific version of Node.js, use the command nvm use <version>. Replace <version> with the version number you want to use¹⁴. For example, if you want to switch to Node.js version 10.16.0, you would use the command nvm use 10.16.0.

Remember, you need to have the desired version of Node.js installed on your machine before you can switch to it. If the version is not installed, you can install it using nvm install <version>.

Please note that these commands are for Unix-based systems like Linux and macOS. If you're using Windows, you might want to use [nvm-windows], a similar tool for managing Node.js versions. The commands for nvm-windows are slightly different.

I hope this helps!

Source:
(1) How to switch Node.js versions with NVM - LogRocket Blog. https://blog.logrocket.com/how-switch-node-js-versions-nvm/.
(2) How to switch Node.js versions with NVM - LogRocket Blog. https://blog.logrocket.com/how-switch-node-js-versions-nvm/.
(3) How to Switch to an Older Version of Node.js - squash.io. https://www.squash.io/how-to-switch-to-an-older-version-of-nodejs/.
(4) How to Switch Node Version Permanently with nvm. https://hatchjs.com/nvm-switch-node-version-permanently/.
(5) How to change to an older version of Node.js - Stack Overflow. https://stackoverflow.com/questions/7718313/how-to-change-to-an-older-version-of-node-js.
(6) How to change to an older version of Node.js - Stack Overflow. https://stackoverflow.com/questions/7718313/how-to-change-to-an-older-version-of-node-js.
(7) How To Run Multiple Versions of Node.js with Node Version Manager. https://www.digitalocean.com/community/tutorials/nodejs-node-version-manager.

Source:
(1) Unable to Pod Install on a brand new React Native Project. https://stackoverflow.com/questions/75277079/unable-to-pod-install-on-a-brand-new-react-native-project.
(2) How can I fix pod install error in react-native? - Stack Overflow. https://stackoverflow.com/questions/71393214/how-can-i-fix-pod-install-error-in-react-native.
(3) Example project not building iOS · Issue #632 · oblador/react-native .... oblador/react-native-keychain#632.
(4) Setting up the development environment · React Native. https://reactnative.dev/docs/environment-setup.
(5) undefined. #28446.

[cipolleschi]

Hi @ywqqqqq, the problem in moving the iOS project outside the react-native suggested structure, is that it breaks some assumptions on where the files are located.

For example, in the Podfile, we do this:\

# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

to require the react_native_pods file in Ruby which is the file that contains the prepare_react_native_project! function in your error.

Why do you need to move the ios folder out? Is it a strong requirement for you?
I suggest to keep the structure as it is right now.

Otherwise, you need to figure out all the path that broke, starting from this require and debugging all of them when they appear.

[ywqqqqq]

Hey @cipolleschi, Thanks for your reply.

I had spent several days trying to modify the paths in this piece of code you mentioned , but I failed.

# Resolve react_native_pods.rb with node to allow for hoisting require Pod::Executable.execute_command('node', ['-p', 'require.resolve( "react-native/scripts/react_native_pods.rb", {paths: [process.argv[1]]}, )', __dir__]).strip

The reason for such directory modification is historical. Our project's module directory consists of multiple pods, with each being one of the pods for React Native.

The Actual structure like below:

└── XXProgram
⠀⠀⠀⠀⠀└─ andriod
⠀⠀⠀⠀⠀└─ ios
⠀⠀⠀⠀⠀⠀⠀⠀└── Podfile
⠀⠀⠀⠀⠀└─ module
⠀⠀⠀⠀⠀⠀⠀⠀└── XXRN
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── node_modules
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── package.json
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── XXRN.podspec
⠀⠀⠀⠀⠀⠀⠀⠀└── XXUser
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── XXUser.podspec
⠀⠀⠀⠀⠀⠀⠀⠀└── XXShopping
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── XXUser.podspec

Is it possible to upgrade React Native with this structure?

[cipolleschi]

You can try to hardcode the require to something like:

require_relative '../<path_to_node_modules>/react-native/scripts/react_native_pods.rb'

the first .. is to move out from the ios folder. Then you need to find the path to the react-native source and then it will be in /scripts/react_native_pods.rb.
There are some other paths that can broke at this point, but you should be able to make progress..

I think it would be simpler if you can accept to move back React Native And have something like:

XXProgram
└ node_modules
└ package.json
└ XXRN.podspec #this is probably not required anymore
	└ andriod
	└ ios
		└ Podfile
	└ module
		└ XXUser
			└ XXUser.podspec
		└ XXShopping
			└ XXUser.podspec

This config should be supported out of the box.

[ywqqqqq]

Due to the project containing a dozen native pods, modifying the directory structure is not easy.

XXProgram
└─ ios
⠀⠀⠀└── Podfile
⠀⠀⠀└─ module
⠀⠀⠀⠀⠀⠀└── XXRN
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── a.ts
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── node_modules
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── package.json
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── XXRN.podspec
⠀⠀⠀⠀⠀⠀└── XXUser
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── b.swift
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── XXUser.podspec
⠀⠀⠀⠀⠀⠀└── XXShopping
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── c.swift
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀└── XXShopping.podspec

The hardcode required suggestion you provided resolved the previous error, but a new error has occurred as follows:

{console.log(require('@react-native-community/cli').bin);} catch
  (e) {console.log(require('react-native/cli').bin);}
  /Users/admin/node_modules/@react-native-community/cli/build/bin.js

#the actual path is 
#"/Users/admin/Desktop/XXProgram/module/XXRN/node_modules/@react-native-community/cli/build/bin.js"

It seems like the project root directory gone. The issue is occurring in this line of native_module.rb

cli_resolve_script = "try {console.log(require('@react-native-community/cli').bin);} catch (e) {console.log(require('react-native/cli').bin);}

So I try to hardcode this require_relative '../cli/build/bin.js'. Any all issues have been resolved.

However, hardcoding here is not a good solution. Do you have any better suggestions?:):)@cipolleschi

[cipolleschi]

It is not bad if it works for your use case and you don't have to ship libraries to anyone.

The problem is that you'll have to reapply the fix every time the node_modules changes or get updated. The usual solution in these cases is to leverage a patch-package. So you can create a couple of scripts that replaces the faulty lines in your setup with the hardcoded ones and the patch-package library should take care of applying the pathces every time you run yarn or yarn install to update the dependencies.