VSCode is unable to detect the tsconfig that resides in the Next.js app created using NX

Question

I created a new NX workspace by running:

npx create-nx-workspace@latest --preset=next --packageManager=yarn --skipGit

I have also created a shared lib by running:

npx nx g @nrwl/next:library components --directory=shared/ui/theme-v1.0 --component=false --tags=--tags=scope:themev1-ui,type:shared,platform:web --style=none --importPath=@my-app/shared/ui/theme-v1.0/components

Sharing the tsconfig.json available under the Next.js app:

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "jsx": "preserve",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "incremental": true,
    "types": ["jest", "node"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.js",
    "src/**/*.jsx",
    "next-env.d.ts"
  ],
  "exclude": ["node_modules", "jest.config.ts"]
}

I ran npx nx lint and found no errors.

But, in my VSCode, the tsconfig is not getting detected due to which I can see false errors. Sharing the screenshot of the issue and folder structure:

As you can see in the screenshot, there are errors and on hovering over the selected language mode, we can see the No tsconfig.json message.

But, this issue doesn't exist for any of the libs. Sharing the screenshot of the same:

I can see that this only happens with the Next.js project.

I tried creating a tsconfig.app.json file and extending tsconfig.json but to no avail. Tried reloading VSCode too. I am not quite sure if it's related to VSCode or NX set-up. I am using the workspace typescript and not the one provided by VSCode.

Package.json:

{
  "name": "my-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "dependencies": {
    "@nrwl/next": "15.3.3",
    "core-js": "^3.6.5",
    "next": "13.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "regenerator-runtime": "0.13.7",
    "tslib": "^2.3.0"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.14.5",
    "@nrwl/cypress": "15.3.3",
    "@nrwl/eslint-plugin-nx": "15.3.3",
    "@nrwl/jest": "15.3.3",
    "@nrwl/linter": "15.3.3",
    "@nrwl/nx-cloud": "latest",
    "@nrwl/react": "15.3.3",
    "@nrwl/web": "15.3.3",
    "@nrwl/workspace": "15.3.3",
    "@swc/core": "^1.2.173",
    "@swc/jest": "0.2.20",
    "@testing-library/react": "13.4.0",
    "@types/jest": "28.1.1",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
    "@typescript-eslint/eslint-plugin": "^5.36.1",
    "@typescript-eslint/parser": "^5.36.1",
    "babel-jest": "28.1.1",
    "cypress": "^11.0.0",
    "eslint": "~8.15.0",
    "eslint-config-next": "13.0.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.6.1",
    "eslint-plugin-react": "7.31.11",
    "eslint-plugin-react-hooks": "4.6.0",
    "jest": "28.1.1",
    "jest-environment-jsdom": "28.1.1",
    "nx": "15.3.3",
    "prettier": "^2.6.2",
    "react-test-renderer": "18.2.0",
    "ts-jest": "28.0.5",
    "ts-node": "10.9.1",
    "typescript": "~4.8.2"
  }
}

NX.json:

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "npmScope": "my-app",
  "tasksRunnerOptions": {
    "default": {
      "runner": "@nrwl/nx-cloud",
      "options": {
        "cacheableOperations": [
          "build",
          "lint",
          "test",
          "e2e"
        ],
        "accessToken": "some access token"
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": [
        "^build"
      ],
      "inputs": [
        "production",
        "^production"
      ]
    },
    "test": {
      "inputs": [
        "default",
        "^production",
        "{workspaceRoot}/jest.preset.js"
      ]
    },
    "e2e": {
      "inputs": [
        "default",
        "^production"
      ]
    },
    "lint": {
      "inputs": [
        "default",
        "{workspaceRoot}/.eslintrc.json"
      ]
    }
  },
  "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"
    ]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "babel": true
      }
    },
    "@nrwl/next": {
      "application": {
        "style": "css",
        "linter": "eslint"
      }
    }
  },
  "defaultProject": "my-app"
}

Answer 1

I found the issue. The issue seems to be with the include property set by the @nrwl/next team.

When we create a new app, the include property is set to:

  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.js",
    "src/**/*.jsx",
    "next-env.d.ts"
  ]

But, the Next.js app doesn't have a src/ directory. So, it needs to be set to:

"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts"]

I have raised a GitHub ticket as well - https://github.com/nrwl/nx/issues/13861