nx run {app name}:add:ios "error Capacitor CLI needs to run at the root of an npm package."

[isaiahdahl]

I'm scaffolding a new Ionic Angular app in a NX workspace.

My app serves and builds.

When I run nx run frontend:add:ios or nx run frontend:cap --cmd="add ios" I get this output.

[error] The Capacitor CLI needs to run at the root of an npm package.
        Make sure you have a package.json file in the directory where you run the Capacitor CLI.
        More info: https://docs.npmjs.com/cli/init
ERROR: Something went wrong in @nrwl/run-commands - Command failed: npx cap add ios

My package JSON is

{
  "name": "officeperks",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test",
    "postinstall": "ngcc --properties es2015 browser module main"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.1.0",
    "@angular/common": "~13.1.0",
    "@angular/compiler": "~13.1.0",
    "@angular/core": "~13.1.0",
    "@angular/forms": "~13.1.0",
    "@angular/platform-browser": "~13.1.0",
    "@angular/platform-browser-dynamic": "~13.1.0",
    "@angular/router": "~13.1.0",
    "@capacitor/core": "^3.2.5",
    "@ionic/angular": "^6.0.0",
    "@nestjs/common": "^8.0.0",
    "@nestjs/config": "^1.1.6",
    "@nestjs/core": "^8.0.0",
    "@nestjs/platform-fastify": "^8.0.0",
    "@supabase/supabase-js": "^1.29.1",
    "fastify-cookie": "^5.5.0",
    "fastify-jwt": "^4.1.3",
    "js-yaml": "^4.1.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~7.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.0",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "~13.1.0",
    "@angular/compiler": "~13.1.0",
    "@angular/compiler-cli": "~13.1.0",
    "@angular/language-service": "~13.1.0",
    "@capacitor/android": "^3.2.5",
    "@capacitor/cli": "^3.2.5",
    "@capacitor/ios": "^3.2.5",
    "@ionic/angular-toolkit": "^5.0.0",
    "@nestjs/schematics": "^8.0.0",
    "@nestjs/testing": "^8.0.0",
    "@nrwl/angular": "13.4.4",
    "@nrwl/cli": "13.4.4",
    "@nrwl/cypress": "13.4.4",
    "@nrwl/eslint-plugin-nx": "13.4.4",
    "@nrwl/jest": "13.4.4",
    "@nrwl/linter": "13.4.4",
    "@nrwl/nest": "13.4.4",
    "@nrwl/node": "13.4.4",
    "@nrwl/nx-cloud": "13.0.2",
    "@nrwl/tao": "13.4.4",
    "@nrwl/workspace": "13.4.4",
    "@nxtend/capacitor": "^12.1.0",
    "@nxtend/ionic-angular": "^12.1.0",
    "@tailwindcss/aspect-ratio": "latest",
    "@tailwindcss/forms": "latest",
    "@tailwindcss/line-clamp": "latest",
    "@tailwindcss/typography": "latest",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jest": "27.0.2",
    "@types/js-yaml": "^4.0.5",
    "@types/node": "14.14.33",
    "@typescript-eslint/eslint-plugin": "~5.3.0",
    "@typescript-eslint/parser": "~5.3.0",
    "autoprefixer": "^10.4.2",
    "cypress": "^9.1.0",
    "eslint": "8.2.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jest": "27.2.3",
    "jest-preset-angular": "11.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ngx-tailwind": "^3.0.0",
    "postcss": "^8.4.5",
    "prettier": "^2.3.1",
    "protractor": "~7.0.0",
    "tailwindcss": "^3.0.12",
    "ts-jest": "27.0.5",
    "ts-node": "~8.3.0",
    "typescript": "~4.3.5"
  }
}

[devinshoemaker]

Did you happen to delete the package.json added to the application directory?

[isaiahdahl]

@devinshoemaker do you mean delete the package.json from the workspace directory? Or does the app inside the NX workspace have to have a separate package.json instead of a project.json file.

Here's a screenshot of NX workspace. frontend is the Ionic app.

[isaiahdahl]

So I didn't generate the Ionic app using the nxtend generator, I ported it over from a past starter project. It didn't have a package.json.

I created an application with the generator and saw the package.json file in the application directory with nothing but this in it.

{
  "name": "officeperks",
  "devDependencies": {
    "@capacitor/cli": "^3.2.5"
  }
}

Adding this fixed my issue.

Maybe worth adding to the docs on this page? https://nxtend.dev/docs/ionic-angular/capacitor

For capacitor generators to work, a very simple package.json is required?

Thanks anyway!

[devinshoemaker]

Yeah, it may be worth adding something to the documentation, but if you generate an Angular app using my plugin, or if you generate a Capacitor configuration for an existing project using @nxtend/capacitor then it will add this package.json for you. This is due to a limitation with the Capacitor CLI.