Search code examples
reactjsvisual-studio-code

Auto import on vs code fails for new files in react. Need help to understand the issue

I'm setting up IDE to build a new react app & found an issue with Auto-Import while using VS code. It doesn't work. I'm using react with JS & not TS. I added a new js file as below and trying to refer it in a different component. But auto Import doesn't show any suggestions.

I have already enabled auto import on vscode. enter image description here

So I thought some packages I might be missing. Hence tried same on an old app I created long back while learning react. It shows suggestions for old component but fails to do the same on new one. enter image description here

new file:

tempp.js code

Code in app.js

This will significantly reduce my development time. Hence any help is appreciated. I'm unable to figure out if the issue is with the way I'm trying or something to do with vscode.

Version of the react is 18.0.0 & on new app 18.2.0.

Below are the details of vs code that I'm using:

enter image description here

Solution

  • This can sometimes happen if your project file is huge or has a lot of files.

    You can type the component name, select it and press CTRL + Spacebar. This should give you option to auto import.

    You can also try manually saving the component and then try importing it.

    PS: component name should start with a capital letter (best practice)