Cli: Cannot find module 'react-native/cli'

[lachenmayer]

Environment

react-native info output

λ yarn exec react-native info
yarn exec v1.22.0
info Fetching system and libraries information...
System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-4308U CPU @ 2.80GHz
    Memory: 52.27 MB / 16.00 GB
    Shell: 3.0.2 - /usr/local/bin/fish
  Binaries:
    Node: 12.16.0 - /var/folders/z8/xq1r3qcd7szbpx1_77xsgpqc0000gn/T/yarn--1582222260147-0.32330923283802093/node
    Yarn: 1.22.0 - /var/folders/z8/xq1r3qcd7szbpx1_77xsgpqc0000gn/T/yarn--1582222260147-0.32330923283802093/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.2, 27.0.3, 28.0.3
      System Images: android-27 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.1 AI-173.4720617
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: ~16.9.0 => 16.9.0 
    react-native: ~0.61.5 => 0.61.5
✨  Done in 4.79s.

Description

Hi folks, this issue is very closely related to #406, but I decided to open a new issue for it since it may require a different solution altogether, and that issue is closed.

In short, @react-native-community/cli-platform-android is breaking our builds on Appcenter (cc @kinigitbyday https://github.com/react-native-community/cli/issues/406#issuecomment-588406396 ), using the following versions:

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

The exact failure logged by Appcenter (aka Azure DevOps) is the following:

[command]/Users/runner/runners/2.165.0/work/1/s/app/android/gradlew -DAPPCENTER_KEYSTORE_PASSWORD=*** -DMOBILECENTER_KEYSTORE_PASSWORD=*** -DAPPCENTER_KEY_ALIAS=*** -DMOBILECENTER_KEY_ALIAS=*** -DAPPCENTER_KEY_PASSWORD=*** -DMOBILECENTER_KEY_PASSWORD=*** -DAPPCENTER_BUILD_VERSION=14 -DMOBILECENTER_BUILD_VERSION=14 -p app/android clean :app:assembleRelease :app:bundleRelease
Starting a Gradle Daemon, 1 incompatible Daemon could not be reused, use --status for details
Gradle 5.5
:ReactNative:Unexpected empty result of running '[node, -e, console.log(require('react-native/cli').bin);]' command.
:ReactNative:Running '[node, -e, console.log(require('react-native/cli').bin);]' command failed.

FAILURE: Build failed with an exception.

* Where:
Script '/Users/runner/runners/2.165.0/work/1/s/app/node_modules/@react-native-community/cli-platform-android/native_modules.gradle' line: 170

* What went wrong:
A problem occurred evaluating script.
> internal/modules/cjs/loader.js:984  throw err;  ^Error: Cannot find module 'react-native/cli'Require stack:- /Users/runner/runners/2.165.0/work/1/s/[eval]    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:981:15)    at Function.Module._load (internal/modules/cjs/loader.js:863:27)    at Module.require (internal/modules/cjs/loader.js:1043:19)    at require (internal/modules/cjs/helpers.js:77:18)    at [eval]:1:13    at Script.runInThisContext (vm.js:120:20)    at Object.runInThisContext (vm.js:311:38)    at Object.<anonymous> ([eval]-wrapper:10:26)    at Module._compile (internal/modules/cjs/loader.js:1157:30)    at evalScript (internal/process/execution.js:94:25) {  code: 'MODULE_NOT_FOUND',  requireStack: [ '/Users/runner/runners/2.165.0/work/1/s/[eval]' ]}

There is a comment in the affected Gradle file Sometimes Gradle can be called outside of the JavaScript hierarchy (-p flag) which seems related. Appcenter calls this with -p app/android.

We have our RN app in a directory called app/ in our repo, and you can see from the stacktrace that the eval is executed from the root directory of the repo instead of within app/ or app/android as I would expect.

I have tried various versions of @react-native-community/cli-platform-android, and it seems that the issue was introduced by this commit which removes npx, which was released in 3.1.0: https://github.com/react-native-community/cli/commit/b4b08545d3ccec3d2d4a545f029496e0358de49a

We hotfixed this for now by pinning @react-native-community/cli-platform-android to the latest version before 3.1.0 by adding the following to our package.json:

  "resolutions": {
    "@react-native-community/cli-platform-android": "~3.0.0"
  }

Hope this helps, let me know if I can help test any solution to this :)
Thank you!

[thymikee]

Is appcenter called from outside of RN project? Can you share the directory structure and where commands are run from?

[fstojanac]

I have the same issue. It happens in monorepos that have RN projects inside /mobile, /app or something like that. App Center is always calling its scripts from the root level of the repository.

[lachenmayer]

Hi @thymikee, thanks for the quick response. Our React Native package.json file is in a subdirectory called app within the main repo which also has a package.json for server / web stuff. Gradle is called from app/android/gradlew.

Unfortunately I spoke to soon regarding downgrading the version, that ultimately failed too.

I saw that the getCommandOutput method no longer sets a current working directory, which was done in #852. I'm not entirely sure I understand the reasoning for this, but just as a quick hack to get our build working again, I tried to set the working directory to jsAppDir (I just applied this using patch-package):

diff --git a/node_modules/@react-native-community/cli-platform-android/native_modules.gradle b/node_modules/@react-native-community/cli-platform-android/native_modules.gradle
index 8f5dc40..06f6e6c 100644
--- a/node_modules/@react-native-community/cli-platform-android/native_modules.gradle
+++ b/node_modules/@react-native-community/cli-platform-android/native_modules.gradle
@@ -148,10 +148,10 @@ class ReactNativeModules {
    * Runs a specified command using Runtime exec() in a specified directory.
    * Throws when the command result is empty.
    */
-  String getCommandOutput(String[] command) {
+  String getCommandOutput(String[] command, File directory) {
     try {
       def output = ""
-      def cmdProcess = Runtime.getRuntime().exec(command)
+      def cmdProcess = Runtime.getRuntime().exec(command, null, directory)
       def bufferedReader = new BufferedReader(new InputStreamReader(cmdProcess.getInputStream()))
       def buff = ""
       def readBuffer = new StringBuffer()
@@ -194,10 +194,10 @@ class ReactNativeModules {
      */
     def cliResolveScript = "console.log(require('react-native/cli').bin);"
     String[] nodeCommand = ["node", "-e", cliResolveScript]
-    def cliPath = this.getCommandOutput(nodeCommand)
+    def cliPath = this.getCommandOutput(nodeCommand, new File(this.jsAppDir))

     String[] reactNativeConfigCommand = ["node", cliPath, "config"]
-    def reactNativeConfigOutput = this.getCommandOutput(reactNativeConfigCommand)
+    def reactNativeConfigOutput = this.getCommandOutput(reactNativeConfigCommand, new File(this.jsAppDir))

     def json
     try {

This seems to be working for us so far, though I'm not sure what other side effects this could have. I believe it could potentially solve #804 too, though I haven't looked into that too deeply.

Thank you!

[kyle-ssg]

Environment

We hotfixed this for now by pinning @react-native-community/cli-platform-android to the latest version before 3.1.0 by adding the following to our package.json:

  "resolutions": {
    "@react-native-community/cli-platform-android": "~3.0.0"
  }

Hope this helps, let me know if I can help test any solution to this :)
Thank you!

For some reason, this didn't work for us on AppCenter with react-native 0.65 (I think due to 3.0.3 which is broke in this case), we had to do

"resolutions": {
    "@react-native-community/cli-platform-android": "3.0.2"
  },

[thymikee]

@kyle-ssg are you running AppCenter from a root where there's no node_modules?

[fstojanac]

Another workaround for this issue is to put something like this in the pre-build script.

cp -a "$APPCENTER_SOURCE_DIRECTORY/mobile/" $APPCENTER_SOURCE_DIRECTORY

Of course, instead of /mobile put your RN directory path inside the repo.

[kyle-ssg]

@thymikee Yeah, we have the project in /mobile.

Ah, that's a better workaround than staying on the specific version of the CLI, thanks for the suggestion @fstojanac!

[thymikee]

So you could cd mobile and run your scripts there, right? Also, since have you tried creating Yarn workspaces?

[kyle-ssg]

Well, that's down to AppCenter, I don't think I'd be able to control that.

Haven't checked out Yarn workspace but would rather not like to overcomplicate our current setup for the sake of getting builds working again.

[thymikee]

Can you share a snippet of the appcenter config that runs your builds?

[kyle-ssg]

I don't have any config, it's done totally their ci.
i.e.

[kyle-ssg]

Unfortunately, I've just realised that the solution of copying mobile to root won't work, app center lets you select build flavours and the package json based on directories

[fstojanac]

Hm, why would that prevent copying in the root directory? I've kept location of package.json on AppCenter in /mobile, copied everything from there to the root in the pre-build script, and everything is working ok.

AppCenter still runs build from the /mobile directory, copying to the root only ensures it has node_modules, specifically react-native/cli, there. I'm quite positive that you could only copy node_modules and maybe package.json, but haven't tried it.

[Baterka]

Is it fixed? Or any real fix here? I am not able to build it in AppCenter. I am using yarn workspaces

[grabbou]

The workaround here works, but it's tricky in some cases.

The real problem is that jsAppDir will point to monorepo root when CLI dependencies are hoisted to the root. This will result in skipping dependencies from being autolinked that are inside root/packages/name.

What we really need is a way to get a path to Gradle configuration or location of MyApplication that we are building. Based on that, we can resolve from there.

Anyone has idea how to achieve it?

[fabienso]

Hey,
I have the same problem. The application is not running in Microsoft Appcenter.

I have already tried the following changes.

• Adjustments from https://github.com/react-native-community/cli/issues/406
• Change of the versions from ^4.3.0 to 3.0.0 (react-native-cli -> package.json)
• Change the directory to "root"
• Creation of a post-script which performs the "react-cli" installation.

The trace:

* Where:
Script '/Users/runner/runners/2.165.1/work/1/s/PROJECT/node_modules/@react-native-community/cli-platform-android/native_modules.gradle' line: 170

* What went wrong:
A problem occurred evaluating script.
> internal/modules/cjs/loader.js:638    throw err;    ^Error: Cannot find module 'react-native/cli'    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)    at Function.Module._load (internal/modules/cjs/loader.js:562:25)    at Module.require (internal/modules/cjs/loader.js:692:17)    at require (internal/modules/cjs/helpers.js:25:18)    at [eval]:1:13    at Script.runInThisContext (vm.js:122:20)    at Object.runInThisContext (vm.js:329:38)    at Object. ([eval]-wrapper:6:22)    at Module._compile (internal/modules/cjs/loader.js:778:30)    at evalScript (internal/bootstrap/node.js:590:27)

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 10s
Error: /Users/runner/runners/2.165.1/work/1/s/PROJECT/android/gradlew failed with return code: 1

Can anyone give me a "walkaround" so that the application can be built in the AppCenter?
The automatic build of the iOS app works. But not the specific Android app.

[WolfyUK]

@fabienso Android builds have been failing in App Center since 09:30 UTC and the status page still reports Experiencing Issues. Maybe try again once this has been resolved?

[fabienso]

@WolfyUK Alright do you mean this?

The application is now successfully building. The app only needs to be located in the "root directory".

Thank you!

[WolfyUK]

@fabienso. Yes, and this:

[maulikdhameliya]

I am also facing this issue after I upgraded my react-native version from 0.60.4 to 0.61.5 and this error I am seeing on app center only.

[maulikdhameliya]

update: I got this error fixed in app center by just moving react-native project to root folder. earlier it was in /mobile

[Arxcis]

So after fix #1057, who should upgrade what to which version, to make this work in appcenter.ms?
Is it react-native that should be upgraded?

[kyle-ssg]

@Arxcis it looks like so long as you're using @react-native-community/cli-platform-android =>4.4.0 it should fix the issue. I've yet to validate this but looks like this is when the PR was released

[Arxcis]

I dont have a reference to @react-native-community/cli-platform-android in my package.json file, but peeking inside node_modules gives me the answer. v3.1.4

$ pwd
node_modules/@react-native-community/cli-platform-android

$ cat package.json
{
  "name": "@react-native-community/cli-platform-android",
  "version": "3.1.4",
  "license": "MIT",
  "main": "build/index.js",
  "dependencies": {
    "@react-native-community/cli-tools": "^3.0.0",
    "chalk": "^2.4.2",
    "execa": "^1.0.0",
    "jetifier": "^1.6.2",
    "logkitty": "^0.6.0",
    "slash": "^3.0.0",
    "xmldoc": "^1.1.2"
  },
  "publishConfig": {
    "access": "public"
  },
  "files": [
    "build",
    "native_modules.gradle"
  ],
  "devDependencies": {
    "@react-native-community/cli-types": "^3.0.0",
    "@types/execa": "^0.9.0",
    "@types/fs-extra": "^8.0.0",
    "@types/glob": "^7.1.1",
    "@types/xmldoc": "^1.1.4"
  },
  "gitHead": "3158e2e3fa54e3740874af20b2b31eb66df8e0f4"
}

grep in package.json in node_modules

➜  mobile git:(develop) ✗ grep -r "@react-native-community/cli-platform-android" node_modules/**/package.json
node_modules/@react-native-community/cli-platform-android/package.json:  "name": "@react-native-community/cli-platform-android",
node_modules/react-native/package.json:    "@react-native-community/cli-platform-android": "^3.0.0-alpha.1",
node_modules/react-native-webview/package.json:    "@react-native-community/cli-platform-android": "^3.0.0",

[Arxcis]

I can see that facebook/react-native has upgraded to ^4.7.0 upstream https://github.com/facebook/react-native/blob/master/package.json#L89-L91

[Arxcis]

I solved it by upgrading my project from React Native 0.61 -> 0.62.2, because 0.62.2 uses up-to-date-enough version of the cli:
```
"@react-native-community/cli": "^4.5.1",
"@react-native-community/cli-platform-android": "^4.5.1",
"@react-native-community/cli-platform-ios": "^4.5.0",
````
https://github.com/facebook/react-native/blob/v0.62.2/package.json#L89-L91

Thanks a lot for fixing the bug initially 👍

[thymikee]

Glad you made it work @Arxcis!

[sjuanati]

I had the same issue and solved it this way:

1) Android Studio -> Preferences -> Build, Execution, Deployment -> Gradle : if you see the following message:
'gradle-wrapper.properties' not found
2) Run the following command (not in the project path, but anywhere globally):
$ gradle wrapper
3) Now set 'Use Gradle from' -> Specified location, and choose the path where you installed the wrapper in step 2.

[khanhdevvn]

I solved it by upgrading my project from React Native 0.61 -> 0.62.2, because 0.62.2 uses up-to-date-enough version of the cli:

    "@react-native-community/cli": "^4.5.1",
    "@react-native-community/cli-platform-android": "^4.5.1",
    "@react-native-community/cli-platform-ios": "^4.5.0",

https://github.com/facebook/react-native/blob/v0.62.2/package.json#L89-L91

Thanks a lot for fixing the bug initially 👍

you save my life