In the structure of my project, it looks like this:
jsconfig.json
next.config.json
components
|_atoms
|_Button.jsx
|_Button.module.scss
|_...
|_...
...
Within the jsconfig.json file, I have specified the following settings:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/components/*": ["components/*"]
}
},
"include": ["components/**/*", "api/**/*", "data/**/*", "pages/**/*", "utils/**/*"]
}
Although Next.js successfully imports the components and everything is functioning, the autocomplete feature is no longer working during development.
For instance, all these import statements are functioning properly, yet I had to manually type out the paths because autocomplete didn't provide suggestions:
import Button from "components/atoms/Button"; //works
import Button from "@/components/atoms/Button"; //works
import Button from "../components/atoms/Button"; //works if relative path is correct
import styles from "./Button.module.scss"; //works within Button.jsx
While there seems to be no issue with Next.js, the Path Intellisense extension isn't suggesting filenames anymore. I even tried renaming the jsconfig.json file to something else to disable it, which resulted in Path Intellisense functioning correctly but then Next.js couldn't import components.
I'm looking for a solution that allows me to benefit from both absolute imports and also use Path Intellisense. How can I achieve this?