TypeScript: Auto-imports from within jsx don't work

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:

Open any react component
Try to use auto import inside jsx

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 46
Comments: 23 (2 by maintainers)

Most upvoted comments

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

jfreehill-asp on Jun 15, 2021

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

AslanAmca on Jun 11, 2021

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 on Jun 11, 2021

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.

H1ghBre4k3r on Jun 11, 2021

It;s working now on vscode June update

Besuf on Jul 12, 2021

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

Besuf on Jun 22, 2021

@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

Besuf on Jun 22, 2021

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

Akbar-ATQ on Aug 20, 2021

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).

H1ghBre4k3r on Jun 13, 2021