Having set up multiple absolute paths for my Next.js application, I encounter an issue where importing a component from the absolute path results in something like "../componentName" instead of "@components/componentName" when I am inside another folder. This inconsistency often requires manual adjustment in vsCode.
Another challenge I face is with a folder containing all my TypeScript types named /types. Despite creating a path to it, I continue to receive an error stating that it is not declared.
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"baseUrl": "./",
"paths": {
"@images/*": ["images/*"],
"@lib/*": ["lib/*"],
"@components/*": ["components/*"],
"@types/*": ["types/*"],
"@styles/*": ["styles/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
/types/index.ts
export type { SocialFields } from "./objects/social-fields";
export type { HeroProps } from "./hero";
export type { ImageProps } from "./image";
export type { PostProps } from "./post";
export type { ReadMoreProps } from "./read-more";
export type { SocialProps } from "./socials";
export type { Tag } from "./tag";
BlogCard.tsx:
import { PostProps } from "@types"; // <== Cannot find module '@types' or its corresponding type declarations.ts(2307