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.