Nx - 'Unable to write a reference...' error when using run-commands builder

I am getting a peculiar error with building a lib that has a dependency on another lib in the same Nx workspace. I am using the run-commands builder as there are some other tasks that need to be invoked after the initial library build.

I am seeing 'Unable to write a reference...' type error message, e.g.

Unable to write a reference to SomethingCoolComponent in /Users/robert.parker/Documents/Github/nx-playground/libs/common-components/src/lib/components/something-cool/something-cool.component.ts from /Users/robert.parker/Documents/Github/nx-playground/libs/common-components/src/lib/common-components.module.ts
ERROR: Something went wrong in @nrwl/run-commands - Command failed: nx base-build shiny-components

I have a replicable repo where I can showcase here https://github.com/parky128/nx-playground using a couple of minimal libs with a dependency between the two.

After installing dependencies, just run ng run shiny-components:build and see the error emitted.

If I don't use the run-commands builder, and just run ng run shiny-components:base-build task on the same lib it builds just fine, so I am blaming run-commands but I am unsure why it's breaking.

I have seen this answer thats related to the same issue, although they don't seem to be using run-commands and for them was down to a path import issue, but I don't think thats cause for my issue here.

Solution 1:

The issue here is that you introduced a brand new target name base-build which nx doesn't know how to build.

There are two issues:

• nx can't build a proper dependencies graph https://github.com/nrwl/nx/blob/75e6b125351ca828021302b8aef838709be3d579/packages/workspace/src/tasks-runner/utils.ts#L26-L52

• nx can't properly prepare tsconfig.compilerOptions.paths for dependent library https://github.com/nrwl/nx/blob/1139c616e1b7e27c519e385a3982ac8b486dbb0f/packages/workspace/src/utilities/buildable-libs-utils.ts#L11-L17

Luckily, you can configure your workpace properly:

1. Update targetDependencies option in nx.json:

   "targetDependencies": {
     "build": [
       {
         "target": "build",
         "projects": "dependencies"
       }
     ],
     "base-build": [  <== add this
       {
         "target": "base-build",
         "projects": "dependencies"
       }
     ]
   },
   

2. Rename or introduce the same target name for common-components in angular.json:

   "common-components": {
      "projectType": "library",
      "root": "libs/common-components",
      "sourceRoot": "libs/common-components/src",
      "prefix": "rob",
      "architect": {
        "base-build": {  <========================= this line
          "builder": "@nrwl/angular:package",
          "outputs": ["dist/libs/common-components"],
   

Update

I think there is even better approach: don't rename common targets(build, lint, test etc) but instead rename your custom target only

angular.json

"build-with-task": {
      "builder": "@nrwl/workspace:run-commands",
      "options": {
          "commands": [
              "nx build shiny-components",
              "echo done"
          ],

Now, you should be able to run one of these commands:

ng run shiny-components:build
ng run shiny-components:build-with-task

Here's the final PR for your repo https://github.com/parky128/nx-playground/pull/1/files