npx react-native init project failure while installing Bundler: error Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

[araldortogul]

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(R) Core(TM) 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

[araldortogul]

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.

[dannymaate]

Hi, I happen to have the exact same system and library information as you (except for CPU: (8) arm64 Apple M1). I also am experiencing the exact same problem you had 6 days ago. I don't have any spaces in my directory or parent folders. Did you change anything else when resolving this problem? Also did you install cocoapods using brew or sudo gems command?

[araldortogul]

@dannymaate Yes I've installed cocoa pods with brew install cocoapods because 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 doctor in your project folder if you haven't done yet. If npx react-native doctor fails to run, first type npm install.

It's a strange bug that needs further investigation.

[dannymaate]

@araldortogul Yes I have installed and confirmed by running --version that the following is installed: rvm, ruby 2.7.5, cocoapods, xcode, bundler. When prompted to install cocoapods after running npx react-native init test I went for sudo gem install cocoapods, I also tried the option brew install cocoapods.

I tried running npx react-native init test in several different directories, but none worked.

I did not know the npx react-native doctor command even existed! Unfortunately this did not work either. I wonder if this actually is a bug. I'm sure there's something small I've done that is affecting me somehow.

[iKronyck]

Same here :/ I've a Macbook Pro M1

[Lapaenergy]

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

[Lapaenergy]

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.

[hetanthakkar]

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.

Thanks! it worked

[5ecured]

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.

[duylinhdang1998]

Anyone have an idea fix that ?
:(

[sdnyco]

I spent hours working through the standard recommendations to no avail. BUT...

... in my case, @dannymaate's comment was right on the money:

@dannymaate Try initializing your project in another directory (e.g. Desktop etc.), maybe this can solve the problem for you.

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.

[duylinhdang1998]

I followed this and it worked. May be helpful

[abdurrahmanekr]

I reinstall my nodejs environment as arm64 and i didn't need to do anything else.

sudo n --arch arm64 current

# and i ran that code
npx react-native init MyProject

[KhimGurung]

I tried to create new react native project but failed with error:

✔ Processing template
✖ Installing Bundler
error Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

Weird part is, I can create it from mac terminal but when I use vscode terminal to create the project it fails with this error. Any idea what might be the issue?

[HenryJavangwe]

Here’s a solution to that react-native init

[pankajkotwani1]

https://bundler.io/guides/rationale.html this above link will Help you out

[boiwantlearncode]

I still had issues when calling bundle install and got stuck at hermes-engine. Managed to resolve it by running arch -arm64 npx react-native init ProjectName

[walpolsh]

I had this error for hours and the solution was to install the project in a directory without a space in the title. I was trying to install in a directory called "Web Dev" and it kept failing. Putting it right on the desktop worked great!

[giantpanda814]

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(R) Core(TM) 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

Hi I have the same issue today. I want to create new Awesoome project in react native which is latest version I got the bundle issue as you described

I followed the below steps

in my terminal

cd ios

ios bundle install

bundle exec pod install

npm start

it works well

[dwieners]

Hi, I had the same issue today.

arch -arm64 bundle install worked for me.

[efkan]

It seems solved when I executed the init command after installing RVM (Ruby Version Manager) on Mac M1.

[harisbaig100]

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.

[Pajimo]

I just restarted my mac, and the error was gone. You can try restarting as well

[martialanouman]

Thanks @harisbaig100, it was actually due to space in my root folder name.

[ariefsn]

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.

this working for me. Thanks

[sehamabdlnaeem]

I had the same problem, my folder was structured as : "Desktop/React Native/ProjectName" I changed it to: "Desktop/ReactNative/ProjectName" And the problem was fixed

[Frexuz]

bundle config build.ffi --enable-system-libffi
bundle install

tho, im not sure if rn init had any other steps after this?

[ArunKumarVallal99]

Same issue here. Any solution?

[rosivancardosoferreira]

Alguém encontrou uma solução?

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.