Cli: Init does not work with yarn workspaces

[Grohden]

Copy from https://github.com/facebook/react-native/issues/24202 and there's a related issue https://github.com/react-native-community/react-native-cli/issues/271

🐛 Bug Report

I'm using react-native init to create a simple app inside a monorepo, but the cli seems to have problems with the yarn workspaces (with hoisting) - I'm also using lerna, but i don't think that lerna is causing the problems here.

To Reproduce

I'm just running:
react-native init KeepfyApp

The log is:

This will walk you through creating a new React Native project in /home/gabriel/keepfy/root/packages/KeepfyApp
Using yarn v1.15.2
Installing react-native...
yarn add v1.15.2
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
**========= SOME WARNINGS NOT INCLUDED HERE =========**
[4/4] Building fresh packages...

success Saved 1 new dependency.
info Direct dependencies
info All dependencies
└─ [email protected]
Done in 12.57s.
internal/modules/cjs/loader.js:651
    throw err;
    ^

Error: Cannot find module '/home/gabriel/keepfy/root/packages/KeepfyApp/node_modules/react-native/package.json'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:649:15)
    at Function.Module._load (internal/modules/cjs/loader.js:575:25)
    at Module.require (internal/modules/cjs/loader.js:705:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at checkNodeVersion (/home/gabriel/.fnm/node-versions/v11.12.0/installation/lib/node_modules/react-native-cli/index.js:306:21)
    at run (/home/gabriel/.fnm/node-versions/v11.12.0/installation/lib/node_modules/react-native-cli/index.js:300:3)
    at createProject (/home/gabriel/.fnm/node-versions/v11.12.0/installation/lib/node_modules/react-native-cli/index.js:249:3)
    at init (/home/gabriel/.fnm/node-versions/v11.12.0/installation/lib/node_modules/react-native-cli/index.js:200:5)
    at Object.<anonymous> (/home/gabriel/.fnm/node-versions/v11.12.0/installation/lib/node_modules/react-native-cli/index.js:153:7)
    at Module._compile (internal/modules/cjs/loader.js:799:30)

The Error: Cannot find module '/home/gabriel/keepfy/root/packages/KeepfyApp/node_modules/react-native/package.json' is correct, there's no node_modules folder there, they are installed in the root folder, the correct path should be /home/gabriel/keepfy/root/node_modules/react-native/package.json

Expected Behavior

I'm expecting the app to be created, but only the package.json is created.

Code Example

// lerna.json
{
  "packages": [
    "packages/*"
  ],
  "npmClient": "yarn",
  "useWorkspaces": true,
  "version": "independent"
}

//package.json (root)
{
  "name": "root",
  "private": true,
  "devDependencies": {
    "lerna": "3.13.1",
    "yarn": "1.15.2"
  },
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "build": "lerna run build --stream",
    "bootstrap": "lerna bootstrap"
  }
}

With those files in a root project folder, run cd packages && react-native init and you should see the error.

There's something to note here, i could start a ''correct'' project only once, react-native init created the folder and stuff inside, but it installed ignoring the yarn workspaces (because it created the yarn.lock inside the app folder).. so i think that time doesn't count.

Environment

[skip envinfo]

Ran inside the created folder KeepfyApp:
react-native info ->

Command `info` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.

react-native --version ->

react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

If there's another info i can provide to help just ask.

[thymikee]

Thanks! FYI @Esemesek

[Grohden]

While this is still a problem, one could use nohoist as a workaround, yarn itself uses RN as a example:
https://yarnpkg.com/blog/2018/02/15/nohoist/ under How to use it? section

Also, there are usage examples here and I could make RN work following the readme :D

[thymikee]

We should be able to fix it soon, but it will be only available in RN 0.60+

[thymikee]

@Grohden I've submitted #320 to tackle it, feel free to test it locally!

[jarandmi]

I'm still having problems installing [email protected] in a monorepo with Yarn Workspace. It works fine if i try to init in the root folder, but when I try to install it as a package (etc /package/mobile) i get this error (i have change the path to * for privacy reasons):

✔ Downloading template
✔ Copying template
✔ Processing template
⠦ Installing all required dependencies
[!] Invalid `Podfile` file: cannot load such file -- /***/packages/mobile/node_modules/@react-native-community/cli-platform-ios/native_modules.

 #  from /***/packages/mobile/ios/Podfile:2
 #  -------------------------------------------
 #  platform :ios, '9.0'
 >  require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 #
 #  -------------------------------------------

✖ Installing all required dependencies
error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./mobile/ios && pod install".

All the files is also deleted so i can't do the suggested cd ./mobile/ios && pod install

[thymikee]

@jarandmi please read the docs: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md#custom-root-monorepos

[thymikee]

pod install is the last step, so you can safely ignore this failure, adjust paths in the Podfile and run pod install again.

[jarandmi]

Thanks for replying. The problem is when the react-native init mobilecommand fails. I can see the mobile folder being created with all its files, but then removed when the last step fails, so i have no podfile.

Should i interrupt the cli when it comes to the last step, update the path, and the rund pod install manually?

[thymikee]

Yup, sounds fine for now. Since this is a workaround, we may want to introduce a --no-pod-install flag, that's going to prevent from running pod install and let you do that manually. I'm not sure if that's the best we can do though.

[MANTENN]

Yup, sounds fine for now. Since this is a workaround, we may want to introduce a --no-pod-install flag, that's going to prevent from running pod install and let you do that manually. I'm not sure if that's the best we can do though.

Is there an issue created for it?

Would you mind referencing it in this thread?

[thymikee]

There's no issue. However in v2.7.1 we removed the cleanup of project directory once failed, so now you're able to cancel the init process and go back where you've been.

[kannanhassouna]

I'm still having problems installing [email protected] in a monorepo with Yarn Workspace. It works fine if i try to init in the root folder, but when I try to install it as a package (etc /package/mobile) i get this error (i have change the path to * for privacy reasons):

✔ Downloading template
✔ Copying template
✔ Processing template
⠦ Installing all required dependencies
[!] Invalid `Podfile` file: cannot load such file -- /***/packages/mobile/node_modules/@react-native-community/cli-platform-ios/native_modules.

 #  from /***/packages/mobile/ios/Podfile:2
 #  -------------------------------------------
 #  platform :ios, '9.0'
 >  require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 #
 #  -------------------------------------------

✖ Installing all required dependencies
error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./mobile/ios && pod install".

All the files is also deleted so i can't do the suggested cd ./mobile/ios && pod install

I think you can navigate to podfile and change the directory of @react-native-community/cli-platform-ios
to
require_relative '../../../node_modules/@react-native-community/cli-platform-ios/native_modules'