VSCode's Intellisense breaks when using tsconfig's references

[Yokool]

🔎 Search Terms

typescript monorepo intellisense issue, adding to package.json breaks typescript's import intellisense, typescript references vscode import issue

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about imports.

⏯ Playground Link

https://github.com/Yokool/tuskydesign

💻 Code

// (0. only when testing in the repo => go to packages/animals, packages/names and packages/zoo and run npm run build in every folder [also run npm install])
// 1. Remove this import
import { Animal } from "@tuskdesign/animals";

// 2. Go to this line
// 3. Put the cursor the the end of the word animal and trigger intellisense/autocompletion (by default ctrl+space)
// 4. Auto imports don't offer the option to import from @tuskdesign/animals (expect it to offer the option when project references and aliases are setup correctly)
const animal: Animal = {
  name: "test",
  sound: "test",
};

console.log(animal);

🙁 Actual behavior

When you remove the current import and you try to use vscode's auto import / intellisense feature for the Animal enum from a package that is handled by a different tsconfig.json and is referenced by the "references" field inside of your project, the auto import function does not work.

There are very two important things:

1. if there is any other file in the main project (the one that has the reference to the dependency project) the imports start to work only on those files that have been previously imported - for example if you create a new file called test.ts alongside index.ts inside the zoo folder and you import @tuskdesign/animals, the Animal import's autocompletion inside of index.ts starts to work.

2. There is also a second way to fix the intellisense and that is by removing every other package inside of the package.json of zoo. Remove everything from package.json but @tuskdesign/animals and @tuskdesign/names (the local workspace packages) and from devDependencies remove everything but typescript and then delete node_modules, rerun npm i and restart the ts server. For some reason the intellisense works fine only until adding about 5-7 other packages. This behaviour was extremely brittle and hard to reproduce. There wasn't a single package that was listed that caused the issue and even reruning npm install sometimes did and sometimes did not fix the issue.

🙂 Expected behavior

VSCode's intellisense function should work properly when using the references field for packages that are locally linked or those that are defined with their own tsconfigs. Right now imports work properly only when the repo doesn't contain a significant amount of packages or only when the file containing from the dependency package was imported at least once before.

Additional information about the issue

The testing repo was forked from the nx typescript monorepo example (https://nx.dev/getting-started/tutorials/typescript-packages-tutorial) with added npm packages (since adding them breaks the auto imports). I've also tried other ways to configure my repo with references and the issue was always the same.

Related older issue (that is already closed even though the problematic behaviour still persist)
#26913

[RyanCavanaugh]

Have you checked this? https://github.com/microsoft/TypeScript/wiki/FAQ#auto-import-heuristics-and-preferences specifically have you set includePackageJsonAutoImports ?

[Yokool]

I have indeed missed that section in the FAQ while I was going through it. It even specifies that the size of the dependency list indeed has an effect on the search algorithm - this is why adding more packages seemed to "break" the imports.

For the scenario I've provided - setting includePackageJsonAutoImports to on indeed fixes the issue. I'll later try to fiddle with the settings in my real project, but I'm pretty sure it will get resolved as well.

@RyanCavanaugh Thank you for the answer and I apologize for not going through the FAQ more thoroughly. The issue is thus resolved.