Vscode Path Intellisense not working with jsconfig.json (next js)

Viewed 574

My project structure is like this:

jsconfig.json
next.config.json
components
   |_atoms
       |_Button.jsx
       |_Button.module.scss
       |_...
   |_...
...

and inside the jsconfig.json, I have this:

{
   "compilerOptions": {
      "baseUrl": ".",
      "paths": {
         "@/components/*": ["components/*"]
      }
   },

   "include": ["components/**/*", "api/**/*", "data/**/*", "pages/**/*", "utils/**/*"]
}

Next.js correctly imports the components and it's working, but on the developing side, autocomplete isn't working anymore!

for example, all of these import statements are working like a charm, but I manually wrote the path and autocomplete didn't help:

import Button from "components/atoms/Button";    //works
import Button from "@/components/atoms/Button";  //works
import Button from "../components/atoms/Button"; //works if the relative path is correct
import styles from "./Button.module.scss";       //works inside Button.jsx

So there's no problem with next js, but Path Intellisense isn't suggesting filenames anymore.
I renamed jsconfig.json to something else (to disable it) and this time, Path Intellisense works correctly, but next js can't import components.

How can I benefit from both? I want to have absolute imports and also use Path Intellisense.

1 Answers

If you just created a new jsconfig.json (or tsconfig.json) file, or made changes to it, you'll need to do the following to get it to work properly:

Restart server (for nextjs). Restart VSCode (for autocomplete).

That is,

  • Stop server
  • Restart VSCode
  • Start server
Related