La estructura de mi proyecto es así:
jsconfig.json next.config.json components |_atoms |_Button.jsx |_Button.module.scss |_... |_... ... y dentro de jsconfig.json , tengo esto:
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/components/*": ["components/*"] } }, "include": ["components/**/*", "api/**/*", "data/**/*", "pages/**/*", "utils/**/*"] }Next.js importa correctamente los componentes y funciona, pero en el lado del desarrollo, ¡la función de autocompletar ya no funciona!
por ejemplo, todas estas declaraciones de importación funcionan a la perfección, pero escribí manualmente la ruta y el autocompletado no ayudó:
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 Entonces, no hay problema con el próximo js, pero Path Intellisense ya no sugiere nombres de archivo.
Cambié el nombre de jsconfig.json a otra cosa (para deshabilitarlo) y esta vez, Path Intellisense funciona correctamente, pero el próximo js no puede importar componentes.
¿Cómo puedo beneficiarme de ambos? Quiero tener importaciones absolutas y también usar Path Intellisense.