Capacitor: Bug after sync and open commands

[Theo-Drappier]

Describe the bug

When the nx run app-name:sync:android command is run, npm install is executed at the beginning, so it generates a node_modules folder in the application folder. Next, capacitor generates the capacitor.settings.gradle file in the Android project, which references the various capacitor packages in the application based on the node_modules folder in the application. Once the capacitor synchronisation command has been completed, nxext deletes the node_modules folder. This means that the relative paths in the capacitor.settings.gradle file refer to content which does not exist.

To Reproduce
At the root of your project, run :

• nx run app-name:sync:android
• nx run app-name:open:android
• In Android Studio, try to build your application, you will get this type of error :

Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
> Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'.
   > Could not resolve project :capacitor-android.
     Required by:
         project :app
      > No matching configuration of project :capacitor-android was found. The consumer was configured to find a component for use during compile-time, preferably optimized for Android, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'debug', attribute 'com.android.build.api.attributes.AgpVersionAttr' with value '8.0.0' but:
          - None of the consumable configurations have attributes.

If you look to the file capacitor.settings.gradle, you will have this :

include ':capacitor-android'
project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')

I didn't check if there is the same problem on iOS platform.

Expected behavior
The file capacitor.settings.gradle must refers paths to the node_modules folder of the root, like this :

include ':capacitor-android'
project(':capacitor-android').projectDir = new File('../../../node_modules/@capacitor/android/capacitor')

I can't change this file because capacitor generates this file every time the sync command is used.

Additional context

I found the option --preserveProjectNodeModules=true which preserves the node_modules folder, but in my opinion it's no good having to add a parameter for the whole process to work. This option should be applied to the command nx run app-name:sync:android as well as nx run app-name:open:android, because on the open command, an npm install is also executed as well as the deletion of the node_modules folder.

[ccosmincc]

I'm facing the exact same problem. It's also reproducible for iOS.

[tiga05]

Just a sidenote: We had a similiar issue in connection with that. Because we also had to preserve the modules folder to be able to build the apps on android/IOS, we had issues running our local development environment.

The run command only uses the node_modules folder in the sub-project (if there is a node_modules folder which is the case now). But this means it can not use all other dependencies coming from the root project folder. The solution here was to use the workspaces feature of npm. Just add your sub-projects via workspaces like this. npm will create symlinks and as a result it should work again.

*****rest of your root package.json *****
  },
  "workspaces": [
    "./apps/*"
  ]
}

No idea if this is an ideal solution but it fixes our issue. Maybe it helps someone out there.

[Theo-Drappier]

Just a sidenote: We had a similiar issue in connection with that. Because we also had to preserve the modules folder to be able to build the apps on android/IOS, we had issues running our local development environment.

The run command only uses the node_modules folder in the sub-project (if there is a node_modules folder which is the case now). But this means it can not use all other dependencies coming from the root project folder. The solution here was to use the workspaces feature of npm. Just add your sub-projects via workspaces like this. npm will create symlinks and as a result it should work again.

*****rest of your root package.json *****
  },
  "workspaces": [
    "./apps/*"
  ]
}

No idea if this is an ideal solution but it fixes our issue. Maybe it helps someone out there.

Thanks, this is the type of solution I was looking for.

[owehmer]

We also had this issue, but after checking the source code I found out that there are special parameters, e.g.

nx run your-app:sync --cmd="sync android" --preserveProjectNodeModules --no-build

--preserveProjectNodeModules will stop deleting your node_modules folder. I didn't find any documentation about this flag, so maybe someone should add this :)

[tiga05]

@owehmer
This solution was already descibred in the first post.

How did you solve the appearing issue regarding the run context I have described?
In our global package.json we have defined a run command via nx for the sub project. Without my workaround, I have the problem that it makes an npm install of the sub-project package.json and then tries to run it. But because the sub-project does not contain all plugins of the global package.json (the reason WHY we use a monorepo ;-)..... ) it then cries about not finding npm packages like angular and so on, because he only searches in the sub project node_modules folder for it.

And that brings me back again to the solution I have provided above.....

[eggbeard]

Experiencing a similar problem and not seeing how the workspaces solution fixes the problem.

With the:

"workspaces": [
    "./apps/*"
  ]

in the root project.json, the links created in the file capacitor.settings.gradle, still have this :

include ':capacitor-android'
project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')

and the node_modules folder is still deleted at the end of the sync/update/open step

What makes the symbolic link (and when) and where is it supposed to point from and to?

[eggbeard]

You can also work round this by adding the preserveProjectNodeModules option to your project.json file

For example:

"sync": {
      "executor": "@nxext/capacitor:cap",
      "options": {
        "cmd": "sync",
        "preserveProjectNodeModules": true
      },
      "configurations": {
        "ios": {
          "cmd": "sync ios"
        },
        "android": {
          "cmd": "sync android"
        }
      }
    },

[distante]

This issue is a massive one. Having a shared package.json is the main reason why we use monorepos.

Preserving the node_modules with preserveProjectNodeModules completely breaks nx serve app.

This was working with version 15 without any issues.