Stuck on "Installing React Native Colo Loco" when generating a new app using both npx and yarn

[subodha]

What's going on? When I tried to create a new mobile app using ignite it keeps Installing React Native Colo Loco. Nothing proceed further. I tried using both NPX and YARN but the same issue occur. Any idea ?

---

Steps to reproduce

1. npx ignite-cli new MyAppor yarn ignite-cli new MyApp --debug
2. Wait until your patience runs out (in my case around 45 minutes).

Result

subodha@Subodhas-MacBook-Pro ignite % yarn ignite-cli new MyApp --debug
yarn run v1.22.15
$ /Users/subodha/Subodha/lab/react-native-lab/ignite/node_modules/.bin/ignite-cli new MyApp --debug
 [object Object]

   · · · · · · · · · · · · · · · · · · 🔥 Ignite 🔥 · · · · · · · · · · · · · · · · · ·

    █ Creating MyApp using Ignite 7.8.1
    █ Powered by Infinite Red - https://infinite.red
    █ Using ignite-cli
    █ Bundle identifier: com.MyApp
    ────────────────────────────────────────────────

    🔥 Igniting app
    🖨  3D-printing a new React Native app
 /Users/subodha/Subodha/lab/react-native-lab/ignite
 /Users/subodha/Subodha/lab/react-native-lab/ignite/MyApp/.gitignore
 /Users/subodha/Subodha/lab/react-native-lab/ignite/node_modules/ignite-cli/boilerplate/.gitignore
 /Users/subodha/Subodha/lab/react-native-lab/ignite/node_modules/ignite-cli/boilerplate/.gitignore.template
    ⠹ Unboxing npm dependencies patch-package 6.2.2

 Applying patches...

    ⠸ Unboxing npm dependencies

 ✔︎ Solidarity checks valid

    ⠸ Unboxing npm dependencies Jetifier found 1249 file(s) to forward-jetify. Using 12 workers...

    ⠼ Unboxing npm dependencies Using Expo modules

    ⠴ Unboxing npm dependencies Auto-linking React Native modules for target `HelloWorld`: RNCAsyncStorage, RNCMaskedView, RNGestureHandler, RNKeychain, RNScreens, and react-native-safe-area-context
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`

 Fetching podspec for `RCT-Folly` from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`

    ⠧ Unboxing npm dependencies Fetching podspec for `boost` from `../node_modules/react-native/third-party-podspecs/boost.podspec`

 Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`

    ⠹ Unboxing npm dependencies Downloading dependencies
Installing CocoaAsyncSocket (7.6.5)
Installing DoubleConversion (1.1.6)
Installing EXApplication (4.0.0)
Installing EXConstants (12.1.3)
Installing EXFileSystem (13.0.3)
Installing EXFont (10.0.3)
Installing EXKeepAwake (10.0.0)
Installing EXLinearGradient (10.0.3)
Installing EXLocalization (11.0.0)
Installing Expo (43.0.3)
Installing ExpoModulesCore (0.4.8)
Installing FBLazyVector (0.66.3)
Installing FBReactNativeSpec (0.66.3)

    ⠦ Unboxing npm dependencies Installing Flipper (0.99.0)
Installing Flipper-Boost-iOSX (1.76.0.1.11)
Installing Flipper-DoubleConversion (3.1.7)
Installing Flipper-Fmt (7.1.7)
Installing Flipper-Folly (2.6.7)
Installing Flipper-Glog (0.3.6)
Installing Flipper-PeerTalk (0.0.4)
Installing Flipper-RSocket (1.4.3)
Installing FlipperKit (0.99.0)
Installing OpenSSL-Universal (1.1.180)
Installing RCT-Folly (2021.06.28.00-v2)
Installing RCTRequired (0.66.3)
Installing RCTTypeSafety (0.66.3)
Installing RNCAsyncStorage (1.15.14)
Installing RNCMaskedView (0.1.10)
Installing RNGestureHandler (1.10.3)
Installing RNKeychain (6.2.0)
Installing RNScreens (3.8.0)
Installing React (0.66.3)
Installing React-Core (0.66.3)
Installing React-CoreModules (0.66.3)
Installing React-RCTActionSheet (0.66.3)
Installing React-RCTAnimation (0.66.3)
Installing React-RCTBlob (0.66.3)
Installing React-RCTImage (0.66.3)
Installing React-RCTLinking (0.66.3)
Installing React-RCTNetwork (0.66.3)
Installing React-RCTSettings (0.66.3)
Installing React-RCTText (0.66.3)
Installing React-RCTVibration (0.66.3)
Installing React-callinvoker (0.66.3)
Installing React-cxxreact (0.66.3)
Installing React-jsi (0.66.3)
Installing React-jsiexecutor (0.66.3)
Installing React-jsinspector (0.66.3)
Installing React-logger (0.66.3)
Installing React-perflogger (0.66.3)
Installing React-runtimeexecutor (0.66.3)
Installing ReactCommon (0.66.3)
Installing Yoga (1.14.0)
Installing YogaKit (1.18.1)
Installing boost (1.76.0)
Installing fmt (6.2.1)
Installing glog (0.3.5)
Installing libevent (2.1.12)
Installing react-native-safe-area-context (3.1.8)
Generating Pods project

    ⠼ Unboxing npm dependencies Integrating client project

    ⠙ Unboxing npm dependencies Pod installation complete! There are 68 dependencies from the Podfile and 59 total pods installed.

    🧶 Unboxing npm dependencies
    ⠋  Writing your app name in the sand npx react-native-rename@2 MyApp -b com.MyApp
    ⠏  Writing your app name in the sand /ios/MyApp RENAMED

 Ignore above error if this file doesn't exist

 Ignore above error if this file doesn't exist

 /ios/MyApp.xcodeproj RENAMED

 Ignore above error if this file doesn't exist

 /ios/MyApp.xcodeproj/xcshareddata/xcschemes/MyApp.xcscheme RENAMED

    ⠋  Writing your app name in the sand /ios/MyAppTests RENAMED

 /ios/MyAppTests/MyAppTests.m RENAMED

 /ios/MyApp.xcworkspace RENAMED

 Ignore above error if this file doesn't exist

 /ios/MyApp-Bridging-Header.h RENAMED

 /android/app/src/main/res/values/strings.xml MODIFIED

 /index.js MODIFIED

 /ios/MyApp/Info.plist MODIFIED

 /package.json MODIFIED

 /app.json MODIFIED

    ⠧  Writing your app name in the sand /ios/MyApp.xcodeproj/project.pbxproj MODIFIED

    ⠋  Writing your app name in the sand /ios/MyApp.xcworkspace/contents.xcworkspacedata MODIFIED

    ⠼  Writing your app name in the sand /ios/MyApp.xcodeproj/xcshareddata/xcschemes/MyApp.xcscheme MODIFIED

    ⠧  Writing your app name in the sand /ios/MyApp/AppDelegate.m MODIFIED

    ⠏  Writing your app name in the sand /android/settings.gradle MODIFIED

    ⠹  Writing your app name in the sand /ios/MyAppTests/MyAppTests.m MODIFIED

    ⠧  Writing your app name in the sand /ios/Podfile MODIFIED

    ⠏  Writing your app name in the sand /app.json MODIFIED

    ⠋  Writing your app name in the sand android/app/src/main/java/com/myapp BUNDLE IDENTIFIER CHANGED

 /android/app/src/main/AndroidManifest.xml MODIFIED

 /android/app/BUCK MODIFIED

 /android/app/build.gradle MODIFIED

 /android/app/src/main/java/com/myapp/MainActivity.java MODIFIED

 /android/app/src/main/java/com/myapp/MainApplication.java MODIFIED

 /android/app/src/main/java/com/myapp/MainActivity.java MODIFIED

 android/app/src/debug/java/com/myapp BUNDLE IDENTIFIER CHANGED

 /android/app/src/main/AndroidManifest.xml MODIFIED

 /android/app/BUCK MODIFIED

 /android/app/build.gradle MODIFIED

 /android/app/src/debug/java/com/myapp/ReactNativeFlipper.java MODIFIED

    ⠹  Writing your app name in the sand Done removing builds.

 APP SUCCESSFULLY RENAMED TO "MyApp"! 🎉 🎉 🎉
Podfile has been modified, please run "pod install" inside ios directory.

 Please make sure to run "watchman watch-del-all" and "npm start --reset-cache" before running the app.

    🏝  Writing your app name in the sand
    ⠴ Installing React Native Colo Loco

---

**`npx ignite-cli doctor` results:**

subodha@Subodhas-MacBook-Pro ~ % npx ignite-cli doctor
System
  platform           darwin
  arch               x64
  cpu                12 cores     Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  directory          subodha      /Users/subodha

JavaScript (and globally-installed packages)
  node                16.13.0      /Users/subodha/.nvm/versions/node/v16.13.0/bin/node
  npm                 8.1.4        /Users/subodha/.nvm/versions/node/v16.13.0/bin/npm
    corepack          0.10.0
    csso-cli          3.0.0
    npm               8.1.4
    yarn              1.22.17
  yarn                1.22.15      /Users/subodha/.nvm/versions/node/v16.13.0/bin/yarn
    create-next-app   11.1.2

Ignite
  ignite-cli         7.8.1        /Users/subodha/.npm/_npx/e31027f3785124a8/node_modules/.bin/ignite
  ignite src         build        /Users/subodha/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build

Android
  java               17.0.1       /usr/bin/java
  android home       -            undefined

iOS
  xcode              13.1
  cocoapods          1.11.2       /usr/local/bin/pod

[subodha]

Since keep Installing React Native Colo Loco for hours I stop the process by Ctrl + C Then open the project directory in the terminal

Installed react-native-colo-loco manually in to project by running yarn add react-native-colo-loco

Then I could run my application successfully.

[jamonholmgren]

@subodha Can you provide npx ignite-cli doctor pls?

[jamonholmgren]

Oops, never mind, you did provide that.

[jamonholmgren]

So I'm able to spin up an app successfully. Hm.

My ignite doctor:

❯ npx ignite-cli doctor
System
  platform           darwin                           
  arch               arm64                            
  cpu                10 cores     Apple M1 Max        
  directory          Temp         /Users/jh/Code/Temp 

JavaScript (and globally-installed packages)
  node                 17.0.1       /opt/homebrew/bin/node 
  npm                  8.1.0        /opt/homebrew/bin/npm  
    npm                8.1.0                               
  yarn                 1.22.17      /opt/homebrew/bin/yarn 
    create-next-app    9.4.4                               
    detox-cli          17.11.0                             
    ios-deploy         1.11.4                              
    react-native-cli   2.0.1                               
    sharp-cli          1.15.0                              
    ts-node            8.8.2                               
    typescript         3.8.2                               
    vercel             21.3.3                              
    ynpx               2.1.1                               

Ignite
  ignite-cli         7.8.1        /Users/jh/.npm/_npx/e31027f3785124a8/node_modules/.bin/ignite      
  ignite src         build        /Users/jh/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build 

Android
  java               1.8.0_312    /Users/jh/.sdkman/candidates/java/current/bin/java 
  android home       -            /Users/jh/Library/Android/sdk                      

iOS
  xcode              13.1       
  cocoapods          1.11.2       /opt/homebrew/bin/pod 

[jamonholmgren]

It's weird that yours stalls like that. I'm not entirely sure why.

[subodha]

It happens when the react-native-colo-loco install ignites itself. But when I installed the react-native-colo-loco manually it works. May be it can a permission issue

[jamonholmgren]

Yeah, very strange! It would be nice to get more insight into what it's doing here.

[leonskim]

@subodha Pinging you because just want to make sure if that still happens to you.

I've tried a couple things but sorry, I haven't been able to recreate it. I've tried different versions [yarn || npm, node, Cocoapods] to make sure it's not the package issue, but no dice. I've tried on 3 different machines, and asked my coworkers to try, but none of them reported the same issue as you're facing unfortunately.

There were another person having the similar issue and reported on our community Slack, but we couldn't figure out from the given info. In fact, we've switched fromyarn | npm to npx to run install-colo-loco after debugging a bit.

It could be some sort of system permission issue too, but we're lack of info to track down for now. Let us know if you find anything interesting in your system so we could take another shot. Thanks.

[subodha]

Hi @leonskim Thank you for attending to this issue. I will investigate further and update you If I find something.

However I love ignite since it is really cool to use. I recomand any one to use this if they are starting react native app.

Thanks again for jumping in to this.

[aymkin]

In my case, something breaks on RN Colo Loco.

npx ignite-cli doctor
System
  platform           darwin                                                       
  arch               x64                                                          
  cpu                8 cores            Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz 
  directory          WebstormProjects   /Users/aymkin/WebstormProjects            

JavaScript (and globally-installed packages)
  node               16.13.0      /Users/aymkin/.nvm/versions/node/v16.13.0/bin/node 
  npm                8.1.0        /Users/aymkin/.nvm/versions/node/v16.13.0/bin/npm  
    corepack         0.10.0                                                          
    expo-cli         5.0.1                                                           
    expo-detox-cli   1.0.10                                                          
    npm              8.1.0                                                           
  yarn               1.22.15      /Users/aymkin/.yarn/bin/yarn                       

Ignite
  ignite-cli         7.8.2        /Users/aymkin/.npm/_npx/e31027f3785124a8/node_modules/.bin/ignite      
  ignite src         build        /Users/aymkin/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build 

Android
  java               11.0.12      /usr/bin/java                     
  android home       -            /Users/aymkin/Library/Android/sdk 

iOS
  xcode              12.5.1     
  cocoapods          1.11.2       /usr/local/bin/pod 

If I ignore it and go to the app directory - iOS builds just fine. Tha android fails to be built.

To ignite the app I did use the npx ignite-cli new easyms --bundle=co.easyms.my, but if I do instead npx ignite-cli new easyms that will work fine.

[osamamukhtarvd]

Same thing is happening to me. Was working a few days ago. Installed ignite cli again and this started happening

[linusdm]

I've stubled on this bug today too. Looking at the process list I could figure out that the following process was hanging:

node /path/to/SomeApp/node_modules/.bin/install-colo-loco --defaults

Running it in the shell gave some insights:

Your git working tree is dirty.
Are you sure you want to continue? [y/N]

Sure enough, I was running the ignite CLI in an existing git folder (I wanted to add it as another sub-project of a mono-repo). Running it in a pristine folder did not result in any problems.

Is there any chance you guys had a similar setup, where you wanted to generate a new project in an existing git repo?

The question now is: is ignite supposed to run in a pristine folder? I see a dedicated initial commit is created, so there are at least some assumptions made on the git environment where you run the command. Or can this be fixed by getting around this prompt when installing colo-loco (there is a CLI flag to ignore the dirty repo check)?

[nirre7]

Good catch @linusdm

A "side note" => This also happens for https://github.com/nirre7/ignite-diff-purge since it creates an ignite app in an existing git repo..

The mono repo setup is probably a fairly common normal scenario though.

[pyurkin]

Thanks @linusdm!

I've changed the directory to one without git and installation works now

[jamonholmgren]

FYI we will be removing RN Colo Loco by default from new projects with #1890.

[infinitered-circleci]

:tada: This issue has been resolved in version 7.10.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: