VSCode not autosuggesting React imports and not underlining missing imports

Question

I'm struggling with Next.js project I'm working on using VSCode. It is based on simple npx create-next-app I'm writing a component (page) and of course need to use react hooks like useState

Before in my previous react projects (not nextjs), after hitting ctrl+space just after useState vscode was suggesting adding correct import from "react". Now it adds it like import { useRef, useState } from "react/cjs/react.production.min"; and it doesn't work...

I think it may be somehow related to .jsconfig file that I added to have absolute imports

  "compilerOptions": {
    "baseUrl": "."
  }
}

Before I added it, it was ok. But unfortunately even if I delete .jsconfig the problem is still there... How to fix it AND have absolute imports available?

The other issue is that in React projects VSCode was automatically underlining missing imports. In NextJS it does not. It's so annoying to look for all the imports that are missing, especially when copy-pasting a larger part of code.

I would highly appreciate any help with this! Thank you in advance!

Answer 1

run npm i @types/react -D or yarn add @types/react -D

Answer 2

use ESLint extension in VS code. it will show you these errors at instant.