Problem with launching application in NX monorepo: (cannot read undefined (reading 'projects')

Question

I had one project (grocery-shop) in NX monorepo that uses nestjs among others. The application is a strict backend api. I wanted to add a frontend and for this purpose I dragged react to the project. After generating a new project in monorepo ( nx g @nrwl/react:app grocery-shop-webapp ) - I can't run either one ( nx serve grocery-shop ).

I am getting an error message:

NX Cannot read properties of undefined (reading 'projects')

My nx.json file code looks like this:

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "npmScope": "grocery-shop",
  "tasksRunnerOptions": {
    "default": {
      "runner": "@nrwl/nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "NjYzNzg4YjMtYjM1ZC00M2NkLThhNzAtZWE2NzM4ZjhiNWUzfHJlYWQtd3JpdGU="
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "^production"]
    },
    "test": {
      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"]
    },
    "lint": {
      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
    },
    "e2e": {
      "inputs": ["default", "^production"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json",
      "!{projectRoot}/jest.config.[jt]s",
      "!{projectRoot}/.eslintrc.json"
    ],
    "sharedGlobals": ["{workspaceRoot}/babel.config.json"]
  },
  "defaultProject": "grocery-shop",
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "bundler": "webpack",
        "babel": true
      },
      "component": {
        "style": "css"
      },
      "library": {
        "style": "css",
        "linter": "eslint"
      }
    }
  }
}

So I decided to implement the "projects" option manually in this file.

...
"npmScope": "grocery-shop",
  "projects": {
    "grocery-shop": {
      "root": "apps/grocery-shop",
      "tags": []
    },
    "grocery-shop-webapp": {
      "root": "apps/grocery-shop-webapp",
      "tags": []
    }
  }
...

So now when I try to run nx serve grocery-shop I get an error message:

NX As of Nx 13, project configuration should be moved from nx.json to workspace.json/project.json. Please run "nx format" to fix this.

NX Cannot find configuration for task grocery-shop:serve

I will mention that " nx format " does not improve anything and the error is still there.

Can you guys help me to run both applications?

EDIT: nx report output:

npm  : 9.2.0
   
   nx : 15.3.3
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.6.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.3.3
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.3.3
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.6.2
   @nrwl/js : 15.6.2
   @nrwl/linter : 15.3.3
   @nrwl/nest : 15.4.2
   @nrwl/next : Not Found
   @nrwl/node : 15.3.3
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.6.2
   @nrwl/react-native : Not Found
   @nrwl/rollup : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : Not Found
   @nrwl/webpack : 15.3.3
   @nrwl/workspace : 15.3.3
   typescript : 4.9.4

SOLUTION: I used the nx migrate latest command to update the version of NX and its dependencies as @Craigory Coppola correctly pointed out - I had dependency version mismatches.

Answer 1

This reads like you probably have mismatched versions of nrwl/nx packages. Can you run nx report ?

They should all be the same except nx cloud