Auto-import from transitive dependency should work when existing import is present

[arogg]

🔎 Search Terms

import suggest resolve package.json subfolder paths workspace

🕗 Version & Regression Information

• I tested this in multiple versions of typescript and the behavior always seems to be the same. I search google a lot. I found information about package.json imports property, and also types, typeRoots and paths property of tsconfig compilerOptions. I tried several things and nothing quite seems to fit.

⏯ Playground Link

No response

💻 Code

import React from "react"

useEffect() // ctrl-dot on this does not trigger the correct suggestion, if the relevant package.json is in a subfolder. even if the npm package exists in the root node_modules folder!

🙁 Actual behavior

pressing ctrl-dot on "useEffect" does not trigger a suggestion to import useEffect from the react package

🙂 Expected behavior

I expect the import suggestion to be shown, since npm indeed installs all package into the root folder, even if the package.json is in a subfolder. And it does compile and run OK if I write the import manually. But I am tired of writing imports manually.

Additional information about the issue

• Why I need this: I have a submodule that I include as npm workspace in each of my repositories. The dependecies are only declared in package.json in my submodule. This avoids the need to declare the same dependencies in each of my projects
• if this cannot be solved any other way, may I ask if there is a way to write some sort of typescript plugin that will recognise the package.json in my submodule to determine relevant import suggestions?

[RyanCavanaugh]

Please give us a complete repo layout to better understand what you're doing here. There are lots of ways to configure this and this may or may not be the expected behavior.

[arogg]

Not sure how markdown works for directory structures, but anyway.. The directory structure is as follows:

• package.json (this file has "my-submodule" listed in "workspaces" property, for convenience, though that may not be important for this issue. This setup ensures that npm install installs dependencies of both package.json files into the root node_modules folder)
• tsconfig.json (more or less important)
• example.ts (this is the file that fails at generating an import suggestion for the react package)
• my-submodule
• my-submodule/package.json (this is the file that has react in its dependencies)

So it fails with this setup. But if I move react (I should say @types/react) into the root (!) package.json file, the import suggestion does work, but I can't do that, because I want to declare all my dependencies in my-submodule. This problem only exists for files outside of my-submodule, because it seems as if typescript ignores what is actually in the node_modules folder and just looks at the package.json files in the enclosing scope... which is exactly the problem why the import suggestion does not work (the problem I am trying to fix).

[RyanCavanaugh]

it seems as if typescript ignores what is actually in the node_modules folder and just looks at the package.json files in the enclosing scope

Yes, this is the intended behavior. Things that happen to be in node_modules but aren't in package.json are assumed to be transitive dependencies, and it's a versioning hazard to rely on a transitive dependency being present. You will have to write the import manually the first time you write it in that project.

[arogg]

But even if I already imported react into the project, it won't suggest anything from react... I could live with writing imports the first time manually, but not every time. So that should be a bug?

I would also like to know if typescript or the language service can be extended in an elegant way via some kind of plugin (I would write) to change the behavior? Maybe I would like to do that instead. Forking does seem too extreme :)

[RyanCavanaugh]

Subsequent imports should work. Can you post a cloneable repo that demonstrates the problem?

[arogg]

Here you go (it's public repository so you should be able to clone): https://github.com/arogg/bug-packagejson-import