nx: nx tries to parse JSONC files as JSON which causes commands to fail

The issue is still relevant and is a somewhat annoying flaw in nx, especially since it affects brand-new users who are onboarding new existing monorepos.

What sucks about this issue is that you run into very early. I had just set up my Nx workspace, made a couple changes to migrate existing/working tsconfigs, and then tried to run my first Nx command, and it failed with a really obscure error (see OP). When I visited the file, there were no visible errors (my editor shows errors in tsconfigs). This was not a pleasant “first taste” of Nx, and many others are likely to run into it. It’s an important issue because it affects new adopters of Nx, especially since Nx sells itself as “works with any project”.

Upon further investigation, it seems that the problem is much worse than what I outlined in the OP. Building anything with NX also fails, because it isn’t able to parse trailing commas in a tsconfig.json file.

For example, running:

nx build isaac-typescript-definitions

Gives the following error:

{
  stack: 'Error: ValueExpected in D:\\Repositories\\isaacscript\\tsconfig.base.json at position 530\n' +
    '    at parseJson (D:\\Repositories\\isaacscript\\node_modules\\nx\\src\\utils\\json.js:30:15)\n' +
    '    at readJsonFile (D:\\Repositories\\isaacscript\\node_modules\\nx\\src\\utils\\fileutils.js:26:37)\n' +
    '    at readRootTsConfig (D:\\Repositories\\isaacscript\\node_modules\\nx\\src\\project-graph\\build-project-graph.js:233:45)\n' +
    '    at D:\\Repositories\\isaacscript\\node_modules\\nx\\src\\project-graph\\build-project-graph.js:40:30\n' +
    '    at Generator.next (<anonymous>)\n' +
    '    at D:\\Repositories\\isaacscript\\node_modules\\tslib\\tslib.js:118:75\n' +
    '    at new Promise (<anonymous>)\n' +
    '    at Object.__awaiter (D:\\Repositories\\isaacscript\\node_modules\\tslib\\tslib.js:114:16)\n' +
    '    at buildProjectGraphUsingProjectFileMap (D:\\Repositories\\isaacscript\\node_modules\\nx\\src\\project-graph\\build-project-graph.js:34:20)\n' +
    '    at D:\\Repositories\\isaacscript\\node_modules\\nx\\src\\daemon\\server\\project-graph-incremental-recomputation.js:145:126',
  message: 'ValueExpected in D:\\Repositories\\isaacscript\\tsconfig.base.json at position 530\n' +
    '\n' +
    'Because of the error the Nx daemon process has exited. The next Nx command is going to restart the daemon process.\n' +
    'If the error persists, please run "nx reset".'
}

(Position 530 is the trailing comma.)

The original error for parsing JSONC files have been fixed. We’ve also moved TS/JS inspection (for building Nx graph) to Rust, so the original issue of reading tsconfig.base.json isn’t relevant.

I tested this on the latest version of Nx, and could not reproduce. If you run into any problems, please open a new issue with reproduction steps. Thanks!

I was so excited to upgrade our monorepo to latest lerna + nx, only to run into this wall 😦

I mean, it’s easy enough to avoid by taking the trailing commas out of tsconfig files. I don’t love it either, but not a deal breaker for a far better monorepo experience.

If you use vscode, the prettier formatter will strip them as a workaround:

 --- a/settings.json
+++ b/settings.json
@@ -1,6 +1,6 @@
 {
   "[jsonc]": {
-    "editor.defaultFormatter": "vscode.json-language-features"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

I just ran into this issue too. They are using the jsonc-parser, which has an option for allowTrailingComma (I don’t think jsonc allows trailing commas by default). The options are passed as the 3rd parameter here:

https://github.com/nrwl/nx/blob/master/packages/nx/src/utils/json.ts#L49

It would be nice if trailing commas were allowed by default, especially when reading tsconfig files.

I just concluded the same as @Zamiell has mentioned with trailing comma in a tsconfig.json file.

To give some context to my issue, it failed from the 3rd paths entry due to the comma in the array element:

{
    ...
    "baseUrl": ".",
    "paths": {
      "@nx-stencil-webpack5/core-components": [
        "dist/libs/core-components"
      ],
      "@nx-stencil-webpack5/core-components/loader": [
        "dist/libs/core-components/loader"
      ],
      "@nx-stencil-webpack5/core-components/*": [
        "dist/libs/core-components/dist/components/*",
      ],
      "@nx-stencil-webpack5/core-components-angular": [
        "libs/core-components-angular/src/index.ts"
      ]
    }
  }
  "exclude": ["node_modules", "tmp"]
  ...