Cli: autoLinking doesn't work with monorepo

[yozman]

Environment

info Fetching system and libraries information...
System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
    Memory: 4.87 GB / 20.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
    Yarn: 1.16.0 - ~/.nvm/versions/node/v12.4.0/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.4.0/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 27, 28, 29
      Build Tools: 27.0.3, 28.0.3, 29.0.0
      System Images: android-27 | Intel x86 Atom_64, android-28 | Intel x86 Atom_64, android-29 | Intel x86 Atom_64
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.0 => 0.60.0

Description

I have a project use monorepo with yarn workspace feature.
it's fail when I cd ios && pod install.

Detected React Native module pods for RNRippleView, react-native-video, and react-native-webview
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `RNRippleView` from `../`
[!] No podspec found for `RNRippleView` in `../`

then I run react-native config

Details

{
  "root": "/Users/flyboy/.dee/yozman/yoboto-app",
  "reactNativePath": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native",
  "dependencies": {
    "react-native-touchable-ripple": {
      "root": "/Users/flyboy/.dee/yozman/yoboto-app/packages/react-native-touchable-ripple",
      "name": "react-native-touchable-ripple",
      "platforms": {
        "ios": {
          "sourceDir": "/Users/flyboy/.dee/yozman/yoboto-app/packages/react-native-touchable-ripple/ios",
          "folder": "/Users/flyboy/.dee/yozman/yoboto-app/packages/react-native-touchable-ripple",
          "pbxprojPath": "/Users/flyboy/.dee/yozman/yoboto-app/packages/react-native-touchable-ripple/ios/RNRippleView.xcodeproj/project.pbxproj",
          "podfile": null,
          "podspecPath": "/Users/flyboy/.dee/yozman/yoboto-app/packages/react-native-touchable-ripple/RNRippleView.podspec",
          "projectPath": "/Users/flyboy/.dee/yozman/yoboto-app/packages/react-native-touchable-ripple/ios/RNRippleView.xcodeproj",
          "projectName": "RNRippleView.xcodeproj",
          "libraryFolder": "Libraries",
          "sharedLibraries": [],
          "plist": []
        },
        "android": null
      },
      "assets": [],
      "hooks": {},
      "params": []
    },
    "react-native-video": {
      "root": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-video",
      "name": "react-native-video",
      "platforms": {
        "ios": {
          "sourceDir": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-video/ios",
          "folder": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-video",
          "pbxprojPath": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-video/ios/RCTVideo.xcodeproj/project.pbxproj",
          "podfile": null,
          "podspecPath": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-video/react-native-video.podspec",
          "projectPath": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-video/ios/RCTVideo.xcodeproj",
          "projectName": "RCTVideo.xcodeproj",
          "libraryFolder": "Libraries",
          "sharedLibraries": [],
          "plist": []
        },
        "android": {
          "sourceDir": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-video/android-exoplayer",
          "folder": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-video",
          "packageImportPath": "import com.brentvatne.react.ReactVideoPackage;",
          "packageInstance": "new ReactVideoPackage()"
        }
      },
      "assets": [],
      "hooks": {},
      "params": []
    },
    "react-native-webview": {
      "root": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-webview",
      "name": "react-native-webview",
      "platforms": {
        "ios": {
          "sourceDir": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-webview/ios",
          "folder": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-webview",
          "pbxprojPath": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-webview/ios/RNCWebView.xcodeproj/project.pbxproj",
          "podfile": null,
          "podspecPath": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-webview/react-native-webview.podspec",
          "projectPath": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-webview/ios/RNCWebView.xcodeproj",
          "projectName": "RNCWebView.xcodeproj",
          "libraryFolder": "Libraries",
          "sharedLibraries": [],
          "plist": []
        },
        "android": {
          "sourceDir": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-webview/android",
          "folder": "/Users/flyboy/.dee/yozman/yoboto-app/node_modules/react-native-webview",
          "packageImportPath": "import com.reactnativecommunity.webview.RNCWebViewPackage;",
          "packageInstance": "new RNCWebViewPackage()"
        }
      },
      "assets": [],
      "hooks": {},
      "params": []
    }
  },
  "commands": [
    {
      "name": "log-ios",
      "description": "starts iOS device syslog tail"
    },
    {
      "name": "run-ios",
      "description": "builds your app and starts it on iOS simulator",
      "examples": [
        {
          "desc": "Run on a different simulator, e.g. iPhone 5",
          "cmd": "react-native run-ios --simulator \"iPhone 5\""
        },
        {
          "desc": "Pass a non-standard location of iOS directory",
          "cmd": "react-native run-ios --project-path \"./app/ios\""
        },
        {
          "desc": "Run on a connected device, e.g. Max's iPhone",
          "cmd": "react-native run-ios --device \"Max's iPhone\""
        },
        {
          "desc": "Run on the AppleTV simulator",
          "cmd": "react-native run-ios --simulator \"Apple TV\"  --scheme \"helloworld-tvOS\""
        }
      ],
      "options": [
        {
          "name": "--simulator [string]",
          "description": "Explicitly set simulator to use. Optionally include iOS version betweenparenthesis at the end to match an exact version: \"iPhone 6 (10.0)\"",
          "default": "iPhone X"
        },
        {
          "name": "--configuration [string]",
          "description": "Explicitly set the scheme configuration to use",
          "default": "Debug"
        },
        {
          "name": "--scheme [string]",
          "description": "Explicitly set Xcode scheme to use"
        },
        {
          "name": "--project-path [string]",
          "description": "Path relative to project root where the Xcode project (.xcodeproj) lives.",
          "default": "ios"
        },
        {
          "name": "--device [string]",
          "description": "Explicitly set device to use by name.  The value is not required if you have a single device connected."
        },
        {
          "name": "--udid [string]",
          "description": "Explicitly set device to use by udid"
        },
        {
          "name": "--no-packager",
          "description": "Do not launch packager while building"
        },
        {
          "name": "--verbose",
          "description": "Do not use xcpretty even if installed"
        },
        {
          "name": "--port [number]",
          "default": 8081
        },
        {
          "name": "--terminal [string]",
          "description": "Launches the Metro Bundler in a new window using the specified terminal path."
        }
      ]
    },
    {
      "name": "log-android",
      "description": "starts logkitty"
    },
    {
      "name": "run-android",
      "description": "builds your app and starts it on a connected Android emulator or device",
      "options": [
        {
          "name": "--root [string]",
          "description": "Override the root directory for the android build (which contains the android directory)",
          "default": ""
        },
        {
          "name": "--variant [string]",
          "description": "Specify your app's build variant",
          "default": "debug"
        },
        {
          "name": "--appFolder [string]",
          "description": "Specify a different application folder name for the android source. If not, we assume is \"app\"",
          "default": "app"
        },
        {
          "name": "--appId [string]",
          "description": "Specify an applicationId to launch after build.",
          "default": ""
        },
        {
          "name": "--appIdSuffix [string]",
          "description": "Specify an applicationIdSuffix to launch after build.",
          "default": ""
        },
        {
          "name": "--main-activity [string]",
          "description": "Name of the activity to start",
          "default": "MainActivity"
        },
        {
          "name": "--deviceId [string]",
          "description": "builds your app and starts it on a specific device/simulator with the given device id (listed by running \"adb devices\" on the command line)."
        },
        {
          "name": "--no-packager",
          "description": "Do not launch packager while building"
        },
        {
          "name": "--port [number]",
          "default": 8081
        },
        {
          "name": "--terminal [string]",
          "description": "Launches the Metro Bundler in a new window using the specified terminal path."
        },
        {
          "name": "--tasks [list]",
          "description": "Run custom Gradle tasks. By default it's \"installDebug\""
        },
        {
          "name": "--no-jetifier",
          "description": "Do not run \"jetifier\" – the AndroidX transition tool. By default it runs before Gradle to ease working with libraries that don't support AndroidX yet. See more at: https://www.npmjs.com/package/jetifier.",
          "default": false
        }
      ]
    }
  ],
  "assets": [],
  "platforms": {
    "ios": {},
    "android": {}
  },
  "haste": {
    "providesModuleNodeModules": [
      "react-native"
    ],
    "platforms": [
      "ios",
      "android"
    ]
  },
  "project": {
    "ios": {
      "sourceDir": "/Users/flyboy/.dee/yozman/yoboto-app/ios",
      "folder": "/Users/flyboy/.dee/yozman/yoboto-app",
      "pbxprojPath": "/Users/flyboy/.dee/yozman/yoboto-app/ios/yoboto.xcodeproj/project.pbxproj",
      "podfile": "/Users/flyboy/.dee/yozman/yoboto-app/ios/Podfile",
      "podspecPath": null,
      "projectPath": "/Users/flyboy/.dee/yozman/yoboto-app/ios/yoboto.xcodeproj",
      "projectName": "yoboto.xcodeproj",
      "libraryFolder": "Libraries",
      "sharedLibraries": [],
      "plist": []
    },
    "android": {
      "sourceDir": "/Users/flyboy/.dee/yozman/yoboto-app/android/app",
      "isFlat": false,
      "folder": "/Users/flyboy/.dee/yozman/yoboto-app",
      "stringsPath": "/Users/flyboy/.dee/yozman/yoboto-app/android/app/src/main/res/values/strings.xml",
      "manifestPath": "/Users/flyboy/.dee/yozman/yoboto-app/android/app/src/main/AndroidManifest.xml",
      "buildGradlePath": "/Users/flyboy/.dee/yozman/yoboto-app/android/app/build.gradle",
      "settingsGradlePath": "/Users/flyboy/.dee/yozman/yoboto-app/android/settings.gradle",
      "assetsPath": "/Users/flyboy/.dee/yozman/yoboto-app/android/app/src/main/assets",
      "mainFilePath": "/Users/flyboy/.dee/yozman/yoboto-app/android/app/src/main/java/com/yoboto/MainApplication.java",
      "packageName": "com.yoboto"
    }
  }
}

I guess this comes with this commit https://github.com/react-native-community/cli/commit/c9aec255627c80dc6bab853ad9433ef7e864cde9
https://github.com/react-native-community/cli/blob/c9aec255627c80dc6bab853ad9433ef7e864cde9/packages/platform-ios/native_modules.rb#L45-L49
for podspec RNRippleView at #L46 absolute_podspec_path is /Users/flyboy/.dee/yozman/yoboto-app/packages/react-native-touchable-ripple/RNRippleView.podspec.
it's already relative_path and doesn't contain character node_modules.
so relative_podspec_path at #L47 will be not correct.

Reproducible Demo

[thymikee]

Did you adjust the root? https://github.com/react-native-community/cli/blob/master/docs/autolinking.md#custom-root-monorepos

[yozman]

@thymikee
I didn't do anything.
my project structure is like this

root/
  node_modules/
    react-native/
    react-native-touchable-ripple/ # this is the link forlder by yarn
      ios/
        RNRippleView.xcodeproj
      RNRippleView.podspec
    ...
  packages/
    react-native-touchable-ripple/
      ios/
        RNRippleView.xcodeproj
      RNRippleView.podspec

it work well with

"@react-native-community/cli-platform-ios": "2.1.1",

[thymikee]

@yozman oh, that's good to know. Would you like to give it a shot and fix it? :)

[thymikee]

cc @maciejsimka

[josmithua]

I'm experiencing this issue as well. @yozman What is the temporary fix you are using?

[thymikee]

@sm1th you can use Yarn resolutions: https://yarnpkg.com/lang/en/docs/selective-version-resolutions/ and pin "@react-native-community/cli-platform-ios": "2.1.1"

[josmithua]

@thymikee TIL, thanks!

[yozman]

@thymikee
I tried with my pool ruby programing knowledge,
this is pr https://github.com/react-native-community/cli/pull/547
wish ur code review and merge

[josmithua]

Is this fix included in react-native 0.60.4?

[thymikee]

@sm1th it's in the range, here's how to update the @react-native-community/cli to the latest version (it's a direct dependency of React Native).

[josmithua]

I followed the upgrade instructions but I'm still having trouble linking a monorepo.

-> yarn list --pattern @react-native-community/cli
yarn list v1.17.3
├─ @react-native-community/[email protected]
├─ @react-native-community/[email protected]
├─ @react-native-community/[email protected]
└─ @react-native-community/[email protected]

react-native.config.js:

module.exports = {
  dependencies: {
    'my-package': {
      root: '/Users/joshua/Projects/myProject/myPackageDir',
    },
  },
};

-> cd ios && pod install
Detected React Native module pods for RNGestureHandler and my-package
Analyzing dependencies
Fetching podspec for `RNGestureHandler` from `../node_modules/react-native-gesture-handler`
...
Fetching podspec for `my-package` from `../Users/joshua/Projects/myProject/myPackageDir`
[!] No podspec found for `my-package` in `../Users/joshua/Projects/myProject/myPackageDir`

[thymikee]

Are you able to prepare a repro we could download and test?

[josmithua]

Sure, please see my branch here.

1. cd example
2. yarn install
3. Edit your react-native.config.js to the correct path.
4. cd ios
5. pod install

I figured out why this structure breaks the native_modules script:

If I have

project_root = "/Users/joshua/Projects/react-native-msal-plugin/example"

and

podspec_path = "/Users/joshua/Projects/react-native-msal-plugin/msalPlugin/react-native-msal-plugin.podspec"

then line 59 will return

relative_path = "/Users/joshua/Projects/react-native-msal-plugin/msalPlugin"

since the split does nothing. So in the next statement, line 61,

File.join(root, relative_path)

becomes

"../Users/joshua/Projects/react-native-msal-plugin/msalPlugin"

and of course there's no podspec file there.

[koredefashokun]

Also having this issue with Android: running the react-native run-android command inside the monorepo package containing the RN app gives the following error: Cannot get property 'packageName' on null object. Apparently the getReactNativeRoot method in the @react-native-community/cli-platform-android/native_modules.gradle file resolves to the root of the monorepo, and not the actual package containing the RN app. It then proceeds to run the react-native config command in the monorepo root, which produces a result that looks like this: (Note the empty object returned for the project key)

{
  "root": "/Users/korede/Overt/Move",
  "reactNativePath": "/Users/korede/Overt/Move/node_modules/react-native",
  "dependencies": {},
  "commands": [],
  "assets": [],
  "platforms": {},
  "haste": {
    "providesModuleNodeModules": [],
    "platforms": []
  },
  "project": {}
}

For context, running the same command in the folder containing the app produces this:

...,
"project": {
    "ios": {
      "sourceDir": "/Users/korede/Overt/Move/packages/client/ios",
      "folder": "/Users/korede/Overt/Move/packages/client",
      "pbxprojPath": "/Users/korede/Overt/Move/packages/client/ios/Move.xcodeproj/project.pbxproj",
      "podfile": "/Users/korede/Overt/Move/packages/client/ios/Podfile",
      "podspecPath": null,
      "projectPath": "/Users/korede/Overt/Move/packages/client/ios/Move.xcodeproj",
      "projectName": "Move.xcodeproj",
      "libraryFolder": "Libraries",
      "sharedLibraries": [],
      "plist": []
    },
    "android": {
      "sourceDir": "/Users/korede/Overt/Move/packages/client/android/app",
      "isFlat": false,
      "folder": "/Users/korede/Overt/Move/packages/client",
      "stringsPath": "/Users/korede/Overt/Move/packages/client/android/app/src/main/res/values/strings.xml",
      "manifestPath": "/Users/korede/Overt/Move/packages/client/android/app/src/main/AndroidManifest.xml",
      "buildGradlePath": "/Users/korede/Overt/Move/packages/client/android/app/build.gradle",
      "settingsGradlePath": "/Users/korede/Overt/Move/packages/client/android/settings.gradle",
      "assetsPath": "/Users/korede/Overt/Move/packages/client/android/app/src/main/assets",
      "mainFilePath": "/Users/korede/Overt/Move/packages/client/android/app/src/main/java/com/move/MainApplication.java",
      "packageName": "com.move"
    }
  }

I'm inclined to think this might be an issue with the getReactNativeRoot method not returning the correct path. Please let me know if there's anything I'm missing. If it's a bug, I'd love to help with a PR to fix it.

[thymikee]

@koredefashokun can you try the latest cli?
Here's how to update the @react-native-community/cli to the latest version.

[koredefashokun]

@thymikee Just confirmed that the latest CLI gives the same error. Was able to get the stacktrace by running the command directly. I can share that if it would be useful as well.

[sibelius]

not sure if this is related or not

but react-native is showing the following warning in a monorepo

Loading dependency graph...warn The following packages use deprecated "rnpm" config that will stop working from next release:
  - @entria/core: https://npmjs.com/package/@entria/core

it looks like it is trying to autolinking a package in a yarn workspaces

we have like this:
packages

• app
• core

I've created a react-native.config.js like this:

```jsx
module.exports = {
project: {
ios: {},
android: {},
},
assets: [],
};
````

to avoid this warning

[MANTENN]

I also get an issue with use_native_modules! when I use it as:

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'annoread' do
  # Pods for annoread
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'
  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  target 'annoreadTests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end

target 'annoread-tvOS' do
  # Pods for annoread-tvOS

  target 'annoread-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

use_native_modules!("../../..")

Adjusting the paths like in this Podfile:

platform :ios, '9.0'
require_relative '../../../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'annoread' do
  # Pods for annoread
  pod 'React', :path => '../../../node_modules/react-native/'
  pod 'React-Core', :path => '../../../node_modules/react-native/React'
  pod 'React-DevSupport', :path => '../../../node_modules/react-native/React'
  pod 'React-fishhook', :path => '../../../node_modules/react-native/Libraries/fishhook'
  pod 'React-RCTActionSheet', :path => '../../../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../../../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../../../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../../../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../../../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../../../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../../../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../../../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../../../node_modules/react-native/Libraries/Vibration'
  pod 'React-RCTWebSocket', :path => '../../../node_modules/react-native/Libraries/WebSocket'

  pod 'React-cxxreact', :path => '../../../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../../../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../../../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../../../node_modules/react-native/ReactCommon/jsinspector'
  pod 'yoga', :path => '../../../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../../../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../../../node_modules/react-native/third-party-podspecs/Folly.podspec'

  target 'annoreadTests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end

target 'annoread-tvOS' do
  # Pods for annoread-tvOS

  target 'annoread-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

Running pod install works.

[thymikee]

You're expected to use use_native_modules! inside the target because it defines pods.

[MANTENN]

You're expected to use use_native_modules! inside the target because it defines pods.

Please add that to the documentation, I went on that page 10 times. I tried it more than 5 times.

[MANTENN]

Also, every pod dependency has to be updated in order for it to work, which is not specified. I am not familiar with Cocoa Pods.

[thymikee]

Now you have this knowledge! Can you share it in the form of a PR to the docs? :)

[MANTENN]

Now you have this knowledge! Can you share it in the form of a PR to the docs? :)

Yes. :)

[MANTENN]

Now you have this knowledge! Can you share it in the form of a PR to the docs? :)

Done.
https://github.com/react-native-community/cli/pull/590

[learnyst]

@thymikee @koredefashokun

I am facing autolink issue in android with monorepo.

ReactNative version: 0.60.4
cli version: 2.8.0

If we run "yarn workspace mobile react-native config" in the root, The output is ok and the project details are filled. If we run "react-native config" in root then the project details are not filled.

When we execute "yarn workspace mobile react-native run-android" I am getting the following error:

• What went wrong:
  A problem occurred evaluating settings 'monorepoproject'.

Cannot get property 'packageName' on null object

This is same as the problem reported by @koredefashokun . Can you please let me know how to resolve this issue.

[thymikee]

What if you tell the CLI where the project is, resolving from the root?

// react-native.config.js
module.exports = {
  project: {
    android: {
      sourceDir: './mobile/android',
    },
  },
};

See: https://github.com/react-native-community/cli/blob/master/docs/projects.md

[learnyst]

@thymikee I tried setting sourceDir in react-native.config.js. But still the issue is same.

https://github.com/learnyst/monorepo.git. This is the minimal reproducible demo.

1. I have created react-native project using react-native init (Version 0.60.4)
2. Then created yarn workspace and moved react-native project to mobile folder

@thymikee please let me know if I need to try any other solution. thanks

[koredefashokun]

Can confirm that this issue still persists @thymikee @learnyst. I've been able to make iOS work, but the error manifests when attempting to run on Android.

[learnyst]

@thymikee any solutions?

[thymikee]

Ok, I've found the issue (at least one of them). Our config resolution relies on package.json with dependencies defined there to be present in the project root. Obviously, this is not working in monorepo setup. So what you can do now to unblock yourselves:

1. Adjust the react-native.config.js,

module.exports = {
  project: {
    android: {
      sourceDir: './packages/mobile/android',
    },
  },
};

1. Add RN deps to the root package.json, e.g.:

--- a/package.json
+++ b/package.json
@@ -6,5 +6,9 @@
       "packages/*"
     ],
     "nohoist": []
+  },
+  "dependencies": {
+    "react-native": "*",
+    "@react-native-community/netinfo": "*"
   }

While on it, how do you usually expect the packages in a monorepo to work? Is it running from the root, or from the package folder? Or maybe both, depending on the use case?

[koredefashokun]

@thymikee I usually expect running commands in the packages to work from the package folder, but also in the root, via scripts added in the package folder's package.json file.

Having to manually create a react-native.config.js may not be helpful in some cases (e.g. When the user has multiple packages that are React Native projects).

[thymikee]

Yea, that's understandable. We'll work on making easier to integrate.

[ericyip]

When I pod install, the dependencies modules detect only works without using use_native_modules!("../../../) <- which points to the root project.

[Salakar]

I came across this today on iOS for local packages in a monorepo, this is how I got around it, not sure if it works for everyone elses cases but let me know as I can send a PR: https://github.com/react-native-community/cli/pull/550#issuecomment-518400626

As a side note as well, the change in that PR should probably be using File.expand_path (same behaviour as path.resolve in nodejs) instead of File.join so maybe to do with that - not had a chance yet to debug further sorry.

[thymikee]

@Salakar we explicitly avoid resolving full path, because it's saved in a Podfile.lock, which is typically saved to git and e.g. read by the CI or other team members.

[Salakar]

@thymikee ah that makes sense. Not sure it can be avoided with symlinks though as they resolve to the full path as far as I can tell, which is what's causing the issue I think

[simka]

@Salakar would you mind checking if this would work in your case?

[brunolemos]

I'm trying to upgrade from react-native 0.59 to 0.61 and having the exact same issue on android: Cannot get property 'packageName' on null object. iOS is working as expected.

Note: by “upgrading” I mean I created a new project from scratch and copy pasted the new files into the monorepo project

Although this comment does seem to fix this specific issue, it installs the react-native app inside packages/mobile/node_modules instead of the root node_modules, which is something I want to avoid because I've had problems with this in the past (and it doesn’t fix all issues, just this new)

Any other solution available/coming to this repo?

CLI version is v3 alpha 2.

[koredefashokun]

I have the same issue @brunolemos. I would appreciate any solution that does not involve me to install react-native in the specific folder, instead of in the root of the monorepo. This is arguably a better approach, especially since users may have more than one package dependent on react-native. Not sure if this is considered a priority in this repo. Would appreciate if anyone could point me in the right direction to submit a pull request to fix this.

[thymikee]

@Esemesek would you find some time to dig it? I'm pretty swamped for the next few weeks, so can't commit to that unfortunately

[brunolemos]

Should we open a new issue? If not, please reopen this one.

[thymikee]

Let's open a new one please, this issue tries to handle too many cases and platforms.

[brunolemos]

Ok, opened https://github.com/react-native-community/cli/issues/655.

[grabbou]

I am going to look into this right now and resolve some of the confusion around monorepo setup. Unfortunately, none of the workarounds seem to be working 100% correct.

[Salakar]

@Salakar would you mind checking if this would work in your case?

Sorry for the late response. Can confirm everything is now working. Auto-linking in a monorepo is working well for https://github.com/invertase/react-native-firebase - though admittedly it's not using a custom root or anything which I think is the case on some of the other issues here.