package.json#imports doesn't get IDE suggestions when typing the import path directly

[anthonyshew]

🔎 Search Terms

package.json imports, package.json imports intellisense, package.json imports autocomplete, package.json import suggestions

🕗 Version & Regression Information

This feature released with v5.4 yesterday so not too much bisection to be done. 😄

⏯ Playground Link

https://github.com/anthonyshew/packagejson-imports-typescript-suggestions

💻 Code

I apologize for not following the standards of the template to provide a TypeScript playground. I couldn't find a way to work with imports or a package.json there. If that is possible and I missed it, please let me know so I can update appropriately.

Reproduction repository: https://github.com/anthonyshew/packagejson-imports-typescript-suggestions

package.json#import: https://github.com/anthonyshew/packagejson-imports-typescript-suggestions/blob/b33225588c9ca061807f8c1cb55c50dff66ef581/package.json#L6

Attempted inference: https://github.com/anthonyshew/packagejson-imports-typescript-suggestions/blob/b33225588c9ca061807f8c1cb55c50dff66ef581/app/page.tsx#L1

🙁 Actual behavior

With your cursor on the path string for the import on line 1 of ./app/page.tsx, opening suggestions does not provide autocomplete.

🙂 Expected behavior

I was hoping to see a suggestion for #components/TestComponent.tsx. Notably, if I write it out fully myself, my editor is happy and my build compiles/bundles successfully so I'm relatively certain that I am set up correctly.

Additional information about the issue

I did some light futzing with the "allowImportingTsExtensions" and "verbatimModuleSyntax" compiler options in my tsconfig.json and was noticing some un-aligned behavior. I'm not sure if this is deserving of another bug report or is related.

As an example, auto-importing seems to use verbatimModuleSyntax (or something like it) even when I don't have that flag enabled. Again, not certain if related.

[Andarist]

The primary focus of the related PR was on auto-imports. I suspect that completions in import sources might be using an entirely different set of methods. With auto-imports, it was a question of figuring out an algorithm to return an alternative module source for a relative source. What you are asking for here is to generate all of those potential extra sources ahead of time and fuzzy-match~ against them when suggesting completions in import statements.

It's quite unfortunate that we've missed this use case - but I'm not sure if this can be fast-pathed to 5.4 as it's not exactly a critical bug fix. cc @andrewbranch WDYT?

As an example, auto-importing seems to use verbatimModuleSyntax (or something like it) even when I don't have that flag enabled. Again, not certain if related.

To get it right - you expect #components/TestComponent.tsx to be used by the auto-import here, right?

[fatcerberus]

I apologize for not following the standards of the template to provide a TypeScript playground. I couldn't find a way to work with imports or a package.json there. If that is possible and I missed it, please let me know so I can update appropriately.

Yeah no, you can't. The playground is just a simple single-file environment with a GUI for setting tsconfig.json options and that's about it. Anything more complex you need to provide a GitHub repo or something.

@Andarist What related PR? I didn't see one mentioned in the OP and you didn't link to one.

[Andarist]

#55015

[andrewbranch]

Duplicate of #52460

[anthonyshew]

@Andarist Gotcha, that all makes sense and definitely respect the difference.

I also just noticed while messing around some more that this works correctly - so it's very specifically the fuzzy matcher that doesn't work.

To get it right - you expect #components/TestComponent.tsx to be used by the auto-import here, right?

Correct, the auto-import is pointing at .jsx when the file on disk is .tsx.

[anthonyshew]

@andrewbranch Oops, wasn't savvy enough to put "subpath" in my search terms. Feel free to close here.

[andrewbranch]

I also just noticed while messing around some more that this works correctly - so it's very specifically the fuzzy matcher that doesn't work.

The screenshot you’re showing is an extension of auto-imports, and came for free with #55015. Path completions, when you’re typing inside an existing string literal module specifier, is a totally different code path and is just missing an implementation. Subpath exports work in path completions, so it shouldn’t be too hard to make subpath imports work, but the code there is not super approachable. The issue is marked Help Wanted and would be a really high-value contribution IMO.

[Andarist]

The issue is marked Help Wanted and would be a really high-value contribution IMO.

[fatcerberus]

@Andarist I know this is off-topic but curiosity got the better of me… what movie is that?

[Andarist]

Mad Max: Fury Road, I think

[typescript-bot]

This issue has been marked as "Duplicate" and has seen no recent activity. It has been automatically closed for house-keeping purposes.