* This is not a duplicate of this question; the accepted answer there is made for TypeScript and doesn't seem to work for JavaScript.
I am working on a Next.js project in Visual Studio Code, and when trying to auto-import anything from "react", the only auto-import suggestions e from "react.production.min" and "react.development".
I can manually import from "react", but even when I already have an import { ... } from "react" statement in the file, it still doesn't show up in the auto-import suggestions, and manually importing every hook I use can get quite tedious.
Is there a way to fix this?
* This is not a duplicate of this question; the accepted answer there is made for TypeScript and doesn't seem to work for JavaScript.
I am working on a Next.js project in Visual Studio Code, and when trying to auto-import anything from "react", the only auto-import suggestions e from "react.production.min" and "react.development".
I can manually import from "react", but even when I already have an import { ... } from "react" statement in the file, it still doesn't show up in the auto-import suggestions, and manually importing every hook I use can get quite tedious.
Is there a way to fix this?
Share Improve this question asked Mar 28, 2022 at 14:57 Leo AsoLeo Aso 12.5k4 gold badges27 silver badges50 bronze badges 1- 1 I have same issue for a few days now. Please tell me if you found something. – Vivek Makwana Commented Apr 7, 2022 at 18:41
8 Answers
Reset to default 6For me, installing @types/react fixes this problem.
From the top note on the original post, I'm assuming the original poster is using Javascript and not Typescript. If so, adding a jsconfig.json file to my project root and using these settings worked for me:
{
"pilerOptions": {
"baseUrl": ".",
"checkJs": true,
"jsx": "preserve"
}
}
I have experienced same problem in OS MS Windows 10 on VS Code for React-18 Development. Auto Import Libraray works sometime but sometime not. I checked my Settings all good but still not working
finally i figured out When i used to open VS using Command-line Like DOS or Windows Power Shell some of intellisense features does not works like Auto import Libraries.
So if we open VS code with GUI like go to project directory and Right Click on white area hit the option Open VS here
Using this approach Everythings works perfectely Fine
Hopefully this will helpful for someone
If you are using typeScript then just need to add below single line code in next-env.d.ts
/// <reference types="@types/react" />
It's 2023 and I faced a similar issue. I'm not an expert but after hours of finding the cause, this worked for me:
Remove the following line from tsconfig.json
"exclude": ["node_modules"]
It is 2023. Check your tsconfig.json. There is must be this line:
"include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.js", "**/*.jsx"],
check that resolutions are correct.
In my case, I just removed(not disabled!!!) the Prettier ESLint extension from the VS extensions, and then I opened the VS code settings.json file. This time I was able to see the wrong formats removed/mutated them and then saved the json file and now everything is working properly again. The first time that I opened the settings file, The Prettier ESLint extiontion prevented from seeing the wrong settings, and also when I wanted to save something I had an infinite loading for saving the file by the Prettier ESLint and have no idea why. I also didn't have a .vscode folder in my Next.js project!
Just to clarify and since I can't ment yet, I've also been able to resolve the issue with a React JavaScript (not TypeScript) app by installing the react types package (I installed globally) by executing the following:
npm i @types/react -g
Now when I start typing a hook like useState for example, I get a list of proper suggestions.
list of React suggestions
As to why this problem may be happening, this is from the VSCode JavaScript documentation:
IntelliSense for JavaScript libraries and frameworks is powered by TypeScript type declaration (typings) files. Type declaration files are written in TypeScript so they can express the data types of parameters and functions, allowing VS Code to provide a rich IntelliSense experience in a performant manner.
VSCode JavaScript documentation
So it makes sense that if, for whatever reason, the types for React have not been installed, they would need to be.