Auto-imports from within jsx don't work

[selrond]

Auto imports inside jsx stopped working on the latest stable release - worked before.
When I try to use auto import, it show correct info about the identifier, but no way to auto import it:

However, whn I use auto import outside of jsx, it works (shows correct path and auto-imports on confirm):

Does this issue occur when all extensions are disabled?: Yes/No

Yes

• VS Code Version: 1.57.0
• OS Version: Darwin x64 19.6.0 (Catalina 10.15.7)

Steps to Reproduce:

1. Open any react component
2. Try to use auto import inside jsx

[AslanAmca]

I can't see the component name in other components. Intellisense/autocomplete not working. Doesn't work on auto import.

[H1ghBre4k3r]

For me, the issue seems to be related to path-aliases in tsconfig.json. I have several entries like:

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/components/*"],
      "@views/*": ["src/views/*"],
      "@api/*": ["src/api/*"],
      "@context/*": ["src/context/*"]
    }
  }
}

If i remove these entries, some imports work (e.g. while typing the name of a component), while others (e.g. CTRL + Space "after" an already written name) do not work reliably or do not work at all.

[SKumarSpace]

I am experiencing the same issue.
I tested on an older version (1.55) on a different computer and it works fine.

I also tested on the latest insider build and the issue persists.
I also downgraded back to 1.56.2 and it's still not working correctly.

@H1ghBre4k3r What's weird is that I thought it was related to the paths but then I made a fresh create-react-app js project and the imports still don't work accurately. I did add a custom paths in my tsconfig and then the issue started happening across any folder.

EDIT: I renamed App.js to App.jsx and the auto import worked (v. 1.55). Testing with Insider Build now

EDIT 2: Did not work on latest insider build (v. 1.58.0-insider)

[H1ghBre4k3r]

Okay, probably i was wrong, sorry. Apparently it has nothing to do with paths (or paths are not the only reason) - it sometimes works with them and sometimes without them.
It seems like the entire import/intellisense functionality is broken:

The dropdown suggests, that the PescaTabBar component is deprecated, even though it is not.

[H1ghBre4k3r]

Seems to be related to microsoft/vscode#126095.

I also experienced "working" intellisense/imports after randomly deleting characters in the name of the component i want to import (probably related to the slow intellisense).

[Goody-Goody]

We've had similar problems with auto-suggest not suggesting anything inside node_modules folder. Forcing vscode to use the workspace typescript version worked for us.
vscode version was 4.3.2
now using 4.2.4

[jfreehill-asp]

I've been experiencing the issue exactly as described, with the same VS Code version (1.57.0) and OS (Catalina 10.15.7).

The only known workaround appears to be typing the component name outside of JSX.

Additional info:

• Not using TypeScript
• Not using a jsconfig file, although did try adding one, to no avail
• Opened the suggestions and let it sit for a while
• Components in node_modules are available immediately
• Intermittent display of local modules

[SKumarSpace]

So I am on VS Code Version 1.57 and running TypeScript Version 4.4.0-dev.20210615 and local imports and working again 😊

[mjbvz]

Just tested with create react app but it seems to work in 4.3.2.

Please share an example project that demonstrates the issue so we can investigate

[heroboy]

Version: 1.57.0 (user setup)
Commit: b4c1bd0a9b03c749ea011b06c6d2676c8091a70c
Date: 2021-06-09T17:18:42.354Z
Electron: 12.0.9
Chrome: 89.0.4389.128
Node.js: 14.16.0
V8: 8.9.255.25-electron.0
OS: Windows_NT x64 10.0.19042

typescript: 4.3.2

Reproduce step:

> npx create-react-app my-app --template typescript
> cd my-app
> npm i antd
> code .

open the app.tsx
input something like

let a = <Modal/>;
let b = <Table/>;
let c = <Form/>;
let d = <Input/>;

Please try them. As I tested, only <Table/> can be auto import from antd.

[selrond]

So I am on VS Code Version 1.57 and running TypeScript Version 4.4.0-dev.20210615 and local imports and working again 😊

@SKumarSpace tried this, still not working

[selrond]

@mjbvz Here's a reproduction:

https://github.com/selrond/vscode-imports-reproduction

[GenAmnesia]

I have this issue too with ts and js, tried on a cra js project and a next ts project. typescript@4.2.4, expecially with Material-UI framework. Works as intended on 1.56. Downgrading vscode for now. Very bad.

[mjbvz]

@andrewbranch Can you help take a look at this issue? We've seen a few reports on the VS Code side after the TS 4.3 update

[Besuf]

Any news guys. Or should we rollback to previous version vscode?

[Besuf]

@mjbvz try npx create-react-app my-app --template typescript
and you will face the issue while trying to auto import jsx or tsx files

[donni106]

we have the same issue.
for us it helped to remove "lib" and "target" from tsconfig.json as well as having no "extends": "expo/tsconfig.base".
this way the auto import works again.
but...this causes other issues.

[selrond]

just tried what @donni106 mentioned, didn't seem to help at all

[iamvucms]

After I disable extension "JavaScript and TypeScript Nightly", it worked. Let's try !

[Besuf]

It;s working now on vscode June update

[Akbar-ATQ]

I too have the same problem, at first I try to delete path alias and it work, but then when I want to screenshot it, it don't work again, and after I try to include the path alias again, it work again, but only in certain file and not work in other file

but after some time, it not work again

[Akbar-ATQ]

it work again after I update the JavaScript and TypeScript Nightly extension