[RN] - error Fetching gem metadata 에러 해결방법(React-native 프로젝트 생성 에러 해결)

💁🏻‍♂️ 서론

현재 에러가 있어도 프로젝트는 생성이 되어 아래 명령어를 통해 실행이 가능하지만

에러 메시지가 추후 어떤 오류를 불러올지 모르니 해결 진행

cd ios && pod install && cd ..

cd projectName

cd npm run ios

 

🚨 에러 발생

React-native 프로젝트 생성 명령어 실행 시 아래와 같은 에러 메세지 발생한다.

npx react-native@latest init projectName

💻 에러 코드(전체 보기)

error Fetching gem metadata from https://rubygems.org/........
Resolving dependencies...
Fetching rexml 3.2.6
Installing rexml 3.2.6
Fetching CFPropertyList 3.0.6
Installing CFPropertyList 3.0.6
Fetching concurrent-ruby 1.2.2
Installing concurrent-ruby 1.2.2
Fetching i18n 1.14.1
Installing i18n 1.14.1
Fetching minitest 5.20.0
Installing minitest 5.20.0
Fetching tzinfo 2.0.6
Installing tzinfo 2.0.6
Fetching zeitwerk 2.6.12
Installing zeitwerk 2.6.12
Fetching activesupport 6.1.7.6
Installing activesupport 6.1.7.6
Fetching public_suffix 4.0.7
Installing public_suffix 4.0.7
Fetching addressable 2.8.5
Installing addressable 2.8.5
Fetching httpclient 2.8.3
Installing httpclient 2.8.3
Fetching json 2.6.3
Installing json 2.6.3 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

current directory:
/Users/username/Desktop/dev/dstest/vendor/bundle/ruby/2.6.0/gems/json-2.6.3/ext/json/ext/generator
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby -I
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0 -r
./siteconf20231024-22524-k78knn.rb extconf.rb
creating Makefile

current directory:
/Users/username/Desktop/dev/dstest/vendor/bundle/ruby/2.6.0/gems/json-2.6.3/ext/json/ext/generator
make "DESTDIR=" clean

current directory:
/Users/username/Desktop/dev/dstest/vendor/bundle/ruby/2.6.0/gems/json-2.6.3/ext/json/ext/generator
make "DESTDIR="
compiling generator.c
In file included from generator.c:1:
In file included from ./../fbuffer/fbuffer.h:5:
In file included from
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX14.0.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby.h:33:
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX14.0.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby/ruby.h:24:10:
fatal error: 'ruby/config.h' file not found
#include "ruby/config.h"
         ^~~~~~~~~~~~~~~
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX14.0.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby/ruby.h:24:10:
note: did not find header 'config.h' in framework 'ruby' (loaded from
'/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/System/Library/Frameworks')
1 error generated.
make: *** [generator.o] Error 1

make failed, exit code 2

Gem files will remain installed in
/Users/username/Desktop/dev/dstest/vendor/bundle/ruby/2.6.0/gems/json-2.6.3
for inspection.
Results logged to
/Users/username/Desktop/dev/dstest/vendor/bundle/ruby/2.6.0/extensions/universal-darwin-22/2.6.0/json-2.6.3/gem_make.out

An error occurred while installing json (2.6.3), and Bundler cannot continue.
Make sure that `gem install json -v '2.6.3' --source 'https://rubygems.org/'`
succeeds before bundling.

In Gemfile:
  cocoapods was resolved to 1.13.0, which depends on
    cocoapods-core was resolved to 1.13.0, which depends on
      algoliasearch was resolved to 1.27.5, which depends on
        json
✖ Installing Ruby Gems
error Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/environment-setup?os=macos&platform=android and follow the React Native CLI QuickStart guide for macOS and iOS.
info Run CLI with --verbose flag for more details.

 

👀 원인

대표적인 원인으로는 아래 두 가지로 확인

1. macOS와 충돌이 일어나는 xcode 버전 사용 중(xcode 업데이트 이후 등) (참고링크)
2. ruby 버전 불일치(번들 설치 오류 / 참고링크)

 

💡 해결방법

 

1. 터미널 열기

2. RubyGems 최신 버전으로 업데이트

gem update --system

 

(진행도중) ERROR: While executing gem ... (Gem::FilePermissionError) 에러가 발생한다면? (아래글 참고)

[ERROR] - ERROR: While executing gem ... (Gem::FilePermissionError)You don't have write permissions for the /Library/Ruby/Gems/

 

3. bundler를 설치(혹은 업데이트) 진행

gem install bundler

4. 다시 React-native 프로젝트 생성 명령어 실행

• 이 작업에서 이전보다 더 많은 시간 소요(약 3분)

npx react-native@latest init projectName

 

5. 이후 cd [프로젝트 명] → npm run ios 를 통하여 정상적인 동작을 확인할 수 있다.

 

 

 

 

참고 : https://github.com/CocoaPods/CocoaPods/issues/10286

참고 : https://rollbar.com/blog/ruby-bundle-install-errors/