Cannot find all references to shared lib's interfaces in VS Code

[andriychuma]

Current Behavior

VS Code cannot discover references to shared entities that are defined in an nx lib. E.g. in a fresh new angular-nest nx monorepo VS Code cannot find all references to the Message interface defined in api-interfaces.ts. As a consequence, we cannot rename the entity throughout the workspace.

As far as I understood, it happens due to separate Typescript projects we have for apps and libs, and due to the fact, VS Code relies on the Typescript server while identifying references. This issue was described in this Typescript ticket and fixed within this one. It is not reproducible in WebStorm, which perhaps uses another way of reference discovery in a workspace.

That's rather not a bug of nx per se, but the initial configuration bug/improvement.

Expected Behavior

Find all references and Rename features should work in VS Code throughout all the nx monorepo Typescript subprojects.

To have it working, every nx shared lib should have the following Typescript options enabled:
E.g. in libs/api-interfaces/tsconfig.json

{
  ...
  "compilerOptions": {
    ...
    "composite": true,
    "declaration": true
  }
}

More details for the composite option is described here.

Also, we might want to reference lib projects from within application projects. However,
I don't know how beneficial it might be in nx monorepos since it's not required for fixing the current issue.
E.g. in apps/api/tsconfig.json:

{
  ..
  "references": [
      { "path": "../../libs/api-interfaces" }
  ]
}

Steps to Reproduce

1. Run npx create-nx-workspace@latest test.
2. Select angular-nest.
3. Proceed further with any app name and stylesheet format.
4. Open the workspace with VS Code.
5. Open api-interfaces.ts (this file should be the first and the only file opened after running VS Code).
6. Find references to the Message interface via Shift+F12 or Alt+Shift+F12.

Actual result: no reference found.

Environment

  @nrwl/angular : 9.3.0
  @nrwl/cli : 9.3.0
  @nrwl/cypress : 9.3.0
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 9.3.0
  @nrwl/linter : 9.3.0
  @nrwl/nest : 9.3.0
  @nrwl/next : Not Found
  @nrwl/node : 9.3.0
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 9.3.0
  @nrwl/web : Not Found
  @nrwl/workspace : 9.3.0
  typescript : 3.8.3

[Disane87]

Just stumbled upon this a few minutes ago. :-(

[amayer42]

Thanks for posting this @andriychuma. I attempted your suggested workaround and had success with utilizing "Find all references" again. I'm curious though, do the typescript settings need to be made in each lib? I was able to make the change in the root tsconfig and it seems to work.

It seems like this should be fine since all of the individual lib tsconfig files inherit from the root right?

[amayer42]

Well, I noticed that changing this value at the root level does fix the "Find all references" issue, but it breaks lots of other things with imports, so it seems that you are correct that it would have to be done in all libs. Suppose I will have to spend a bit more time understanding the fix. Thanks again for posting though.

[Areen3]

Hello,

I have this problem in my application based on monorepo nx

my example looks like this
my-app use -> my-library <- used by my - library-second

first case
close all files in VSC and reopen
and open file main.ts from my-app you see two referencs

1. from app (1 file)
2. from my-library (2 files)
3. refenece from my-library-second don't show

second case
close all files in VSC and reopen
and open file index.ts from from my-library you see only one referencs

1. from app (1 file) - not show
2. from my-library (2 files)
3. refenece from my-library-second don't show

third case
open from my-library-second
shows like firs case

I think the problem is this
VSC / TS does not analyze correctly when opening
organization of the project, whether or not
the method include, files, or refeneces was chosen

example is at:
https://github.com/Areen3/find-references
look at:
microsoft/vscode#80423
#3106

[andriychuma]

Yes @amayer42 , it looks like the composite flag should be introduced for libs only.
Also, after upgrading NX and Angular to 10, the workaround I described in the issue doesn't work. Some changes were introduced to TS configs, so that I needed to extend my fix. Here's what I came up with.

Workaround for NX 10

1. Add a root level tsconfig.json. This file is the "solution" tsconfig as per the following recommendation. It is not involved in the build process. It looks like tsserver requires a root level tsconfig.json to correctly handle multiple related TS-projects (see the related issue Allow to specify the tsconfig.json filename explicitly  microsoft/vscode#12463).

{
  "extends": "./tsconfig.base.json",
  "files": [],
  "include": [],
  "references": [
    { "path": "./apps/<app1-name>" },
    { "path": "./apps/<app2-name>" },
    { "path": "./libs/<lib1-name>" },
    { "path": "./libs/<lib2-name>" }
  ]
}

2. Add a root level tsconfig.base-lib.json, which will be the base configuration file for all the monorepo libraries. It will basically make our lib projects composite.

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "composite": true,
    "declaration": true
  }
}

3. For every monorepo library modify the /libs/<lib-name>/tsconfig.json file. Inherit it from the root tsconfig.base-lib.json and remove files and include entries.

Before

{
  "extends": "../../tsconfig.base.json",
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}

After

{
  "extends": "../../tsconfig.base-lib.json",
  "references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}

4. Restart TS server or VS Code.

From now on, all the monorepo projects are automatically discoverable by TS server and you can find usages/refactor library's interfaces in VS Code.

Works in the following environment

  nx : Not Found
  @nrwl/angular : 10.2.1
  @nrwl/cli : 10.2.1
  @nrwl/cypress : 10.2.1
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 10.2.1
  @nrwl/linter : 10.2.1
  @nrwl/nest : 10.2.1
  @nrwl/next : Not Found
  @nrwl/node : 10.2.1
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 10.2.1
  @nrwl/web : Not Found
  @nrwl/workspace : 10.2.1
  typescript : 3.9.7

[Areen3]

Thanks @andriychuma

Thank you for your help...
I did as you wrote and it works 👍
however with minor problems
here is link to my example: https://github.com/Areen3/nx-reference

When you turn on references you shoud add to tsconfig.lib.json all files that your library depends on

and here is with importing files

Maybe you know a better way than to add all the imported files to tsconfig so that renaming works?
The point is that adding all imported libraries to tsconfig.lib.json as well will be a pain.

[andriychuma]

@Areen3 , I see you made your apps composite by extending /apps/<app-name>/tsconfig.json from /tsconfig.base.lib.json. Actually, you might want to use /tsconfig.base.lib.json as a base config for your libs only /libs/*. For /apps/* use the regular one /tsconfig.base.json.

[Areen3]

Thanks
You have right, I corrected it

Do You complete the include area in your applications (in tsconfig)?

I found out about completing references in tsconfig.json
it helps only VSC to avoid underlining aliases
however, if we want to build app, missing include section causes compilation errors because not all files are in project directory

According to me, it is quite onerous, I have about 30 libraries (at the moment) and I will have about 100
so listing them all in the include part will be a pain
Please write down how you deal with the rename option - use include to rename or do something else???

I have a second question, I noticed that monorepo NX imports do not always fit well (by VSCode)
my settings.json:
"typescript.preferences.importModuleSpecifier": "non-relative",

I tried the original importer with VSCode, AutoImport, TypeScriptImport
with different configurations
and in 20% of cases, the imports do not use aliases and look like this:

I was looking on the internet, the problem is arising
but I failed to find a sufficient solution
do you have a suggestion, it would be very useful

thank you very much

[johannesschobel]

Dear @andriychuma ,

I just stumbled upon the exact same issue, however, in another context: I noticed, that my VSCode was not able to "update imports after renaming" anymore, and i was buffled by this fact.

• I tried another (brand new) dummy workspace with the nest preset and still got the same issue. When moving a file, the imports were not updated. 🔴
• I then created an empty workspace and just created 2 files where one was imported in the other and renamed / moved it. worked properly. 🟢
• Then i added one @nrwl/workspace:lib to this empty workspace and it stopped working. 🔴
• Naturally, the issue must be with the library or the generated workspace file. When i removed the library (but let the workspace file untouched), it worked again. 🟢

Then this got me hooked and i was thinking this must be some joke 🤔

I then inspected the tsconfig files from the generated library and found, that the main one (tsconfig.json) has this empty files and includes arrays, which are then "overwritten" by the tsconfig.lib.json and tsconfig.spec.json files respectively.

When i removed those empty arrays, i got errors, that the other 2 files must have the composite: true flag, otherwise it wont work.

Adding the latter solved the issue for me - and i can refactor again 😆

Dear @vsavkin , @FrozenPandaz , may someone look into this issue? i can confirm the issue described by @andriychuma as i ran into this issue myself today. It costed me about 5 hours, until i found the solution!

All the best