react-native: npx react-native init project failure while installing Bundler: error Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
Description
Hello, I am trying to initialize a new project by following the steps in Setting Up the Development Environment. I get an error during npx react-native init (project name) step about gem native extension. The details about the issue are provided in the screenshot below. I would be appreciated if you could help me resolve this issue.
I have also noticed that react-native cannot find Android SDK even if I have installed the requirements and made the adjustments in the PATH variable (in .zshrc file).
Version
0.70.3
Output of npx react-native info
info Fetching system and libraries information… System: OS: macOS 12.6 CPU: (16) x64 Intel® Core™ i9-9880H CPU @ 2.30GHz Memory: 74.45 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.11.0 - /usr/local/bin/node Yarn: Not Found npm: 8.19.2 - /usr/local/bin/npm Watchman: 2022.10.17.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0 Android SDK: Not Found IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9123335 Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild Languages: Java: javac 16 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.3 => 0.70.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found
Steps to reproduce
I followed the steps in Setting Up the Development Environment exactly as told until the “Creating a new application” step.
The first time I ran npx react-native init (project name), the program gave me an error that I have the wrong Ruby version. I have updated my Ruby version with rbenv install 2.7.5 and rbenv local 2.7.5 commands.
Snack, code example, screenshot, or link to a repository
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 6
- Comments: 31 (1 by maintainers)
Same here 😕 I’ve a Macbook Pro M1
Project creates partially and creating failed on ✖ Installing Bundler step.
But folder with new project already created. You can open it and start commands from react-native doc. After that, bundle will install successfully and project will installed properly.
This did not fix it for me. I keep geting
Failed to build gem native extension.An error occurred while installing ffi (1.15.5), and Bundler cannot continue.npx react-native init AwesomeTSProject --template react-native-template-typescript
An error occurred while installing json (2.6.2), and Bundler cannot continue.
In Gemfile: cocoapods was resolved to 1.11.3, which depends on cocoapods-core was resolved to 1.11.3, which depends on algoliasearch was resolved to 1.27.5, which depends on json
✖ Installing Bundler error Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
Macbook pro 14 m1 pro ruby 2.7.5p203 (2021-11-24 revision f69aeb8314) [arm64-darwin21] via rbenv
I spent hours working through the standard recommendations to no avail. BUT…
… in my case, @dannymaate’s comment was right on the money:
This was literally the only thing that helped me. I ran
npx react-native init {project name}on my Desktop–and it miraculously worked.The folder I originally intended to generate the project in had a space in its name and I guess that cost me 2 hours for nothing.
If you encounter the error “An error occurred while installing ffi (1.15.5), and Bundler cannot continue” while running the command npx react-native@latest init AwesomeProject, try initializing your project in a folder directory without spaces. For example, run npx react-native init on the “Desktop” directory, which usually doesn’t have spaces in its path. This should resolve the issue.
@dannymaate Yes I’ve installed cocoa pods with
brew install cocoapodsbecause react-native also gave an error about that, forgot to mention this.Try initializing your project in another directory (e.g. Desktop etc.), maybe this can solve the problem for you. For my case, removing the space in the folder name solved my problem - I didn’t do anything else. By the way I am using React Native for developing an Android app and React Native still can’t locate Android SDK, but it is able to run nevertheless.
Are you sure you have the other requirements installed? (Xcode etc.) Try running
npx react-native doctorin your project folder if you haven’t done yet. Ifnpx react-native doctorfails to run, first typenpm install.It’s a strange bug that needs further investigation.
I was trying to initialize the project in a folder called “CMPE 451”. I renamed that folder to “CMPE451” and after that I didn’t encounter the error that I mentioned above. It’s strange that renaming the folder solved my issue.
I just restarted my mac, and the error was gone. You can try restarting as well
I still had issues when calling bundle install and got stuck at
hermes-engine. Managed to resolve it by runningarch -arm64 npx react-native init ProjectName