Inconsistent and broken Auto import in VSCode

[ackvf]

Hereby I confirm I did search and read dozen of auto import issues, but they were not related or outdated.

TypeScript Version: 2.7.2

Search Terms: auto import relative absolute tsconfig baseUrl paths

Code
This is my project structure and code. Look for Account.

//tsconfig.json
    "baseUrl": "./",
    "paths": {
      "~/*": ["src/*"]
    }

Expected behavior:

1. With paths turned OFF (code commented)
   Expected is that I am offered with correct relative paths
   1. for index.ts file
      Auto import from './Account/Account' ; class Account - import is already correct
      Auto import from './routes' ; CONST ACCOUNT - correct
   2. for SignIn.tsx file
      Auto import from '../Account/Account' ; class Account - this import is missing
      Auto import from '../routes' ; CONST ACCOUNT - correct
2. With paths turned ON (code uncommented)
   Expected is that I am offered with correct relative AND absolute paths
   1. for index.ts file
      Auto import from './Account/Account' ; class Account - missing
      Auto import from '~/pages/Account/Account' ; class Account - correct
      Auto import from './routes' ; CONST ACCOUNT - missing
      Auto import from '~pages/routes' ; CONST ACCOUNT - correct
   2. for SignIn.tsx file
      Auto import from '../Account/Account' ; class Account - missing
      Auto import from '~/pages/Account/Account' ; class Account - missing
      Auto import from '../routes' ; CONST ACCOUNT - missing
      Auto import from '~pages/routes' ; CONST ACCOUNT - correct

Actual behavior:
note that there are also some completely wrong import suggestions

1. paths OFF
   1. error1: path '.' is invalid - there is no localy available export
      
   2. error2: no class imports are available at all
      
2. paths ON
   1. error3: path '~/pages' is invalid - there is no available export
      
   2. error4: no class imports are available at all
      

note: Auto import in a root file App.tsx finds the class exports.
note2: There is still the wrong import from src/pages folder.
paths OFF

paths ON

So far I have counted 6 missing import suggestions and 4 wrong import suggestions. I am verry confused by the actual behaviour. It looks like I can import from any parent folder of importing module, but not from a sibling folder.
Restarting computer didn't help.

Am I missing something? What's wrong with my configuration?

Related Issues:
Autoimport always imports relative to baseUrl #19920

[ghost]

Could you try and reproduce this in a simple project with only a few files?

[ackvf]

I have actually just started this project, there is only a handful of components. I removed all credentials and all references to firebase, here's the repo. https://github.com/ackvf/vscode-auto-import

[ghost]

error1: path '.' is invalid - there is no localy available export

. is the current directory, and node will look in ./index.ts which exports Account. That's a bit strange since it's the current file, but it seems to work.

error2: no class imports are available at all

In SignIn.tsx with path mapping off, I can get an import import { Account } from '..'; -- sometimes. It seems like sometimes vscode isn't asking for the completion details, so the completion shows up but there is no auto-import. @mjbvz

error3: path '~/pages' is invalid - there is no available export

It seems valid? ~/pages is mapped to src/pages, which is imported from src/pages/index.ts, which has an Account export, same as with error1.

error4: no class imports are available at all

As with error2, this is working for me half the time. The other half, vscode doesn't seem to be requesting completion details.

[ackvf]

@Andy-MS I am sorry, I fixed all imports by hand before pushing to github. The Account import was not there by the time I reported the error. See screenshot above.

Well in fact, it was there at first, but then I got some complicated import issues and while investigating, I discovered that the issue can be reproduced much easier in the pages/index.ts, so I removed the Account import from there, saved all files, restarted computer, and tried to import the Account using auto import. Maybe the Account got cached somehow that it thought it is still at .?

[ghost]

So you can't reproduce any issue any more?

I've filed an issue at microsoft/vscode#47988 about the other problems I noticed.

[ackvf]

Actually the auto-import still doesn't work and there is another discovery.

[ghost]

What's the bug in that image?

[ackvf]

The bug is that ctrl+space does not suggest what the auto-fix-bulb does.
Import 'Navlink' from module "~/component/links/NavLink" is missing.

[ghost]

Import fix is designed to give you a choice of all possible ways of importing something. Completions just chooses what it thinks is the best one.

[ackvf]

Right, but I am actually missing the mentioned import in completions in this case and in all cases mentioned at the top, so I guess it is a bug, isn't it?

[ghost]

That screenshot shows that the completions are giving you one way of getting the identifier. We intentionally avoid adding many different completions for the same identifier.

[ackvf]

There are actually two implementations of NavLink, one is react-router-dom, another is my own implementation. It's not like the same component available from multiple export paths.

Also it works as expected in my other project. (no ts, just js)

[ghost]

@ackvf I cloned the repository and I don't see your own implementation? I added one and now it does show up in completions:

[ackvf]

I will test it tomorrow. Thank you for your reply.

[ackvf]

I see! Actually I continued working on the project so the NavLink was indeed not in the example repo. But the problem is clearly visible in the gif. And fortunatelly-unfortunatelly I was able to reproduce the issue very easily. It is available in another commit in the aforementioned repo. Try opening components\Navigation\index.tsx and import the missing NavLink from there on line 20.

This is the exhibited behavior as per #23014 (comment)

[ghost]

@ackvf Thanks, there was a bug due our handling of default exports in tsx.

[ackvf]

Thanks!