#Module aliases dont work in app router
1 messages · Page 1 of 1 (latest)
Based on the information provided, it seems like the issue might be related to the configuration of your tsconfig.json file. In your tsconfig.json, you have set the path alias @/* to map to ./src/*. This means that when you use @/, it will look for the file in the src directory.
However, in your import statement, you are using @/app/(authentication)/_components/login, which would translate to ./src/app/(authentication)/_components/login based on your tsconfig.json configuration. If your file is not located at this path, you will get a Module not found error.
Here's an example of how you can set up your tsconfig.json to correctly map your paths:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/app/*": ["src/app/*"]
}
}
}
In this configuration, @/app/* will map to src/app/*. So, if your file is located at src/app/(authentication)/_components/login.tsx, you can import it using @/app/(authentication)/_components/login.
Please ensure that the path you are providing in the import statement matches the actual location of the file in your project directory.
For more information on how to configure path aliases, you can refer to the Next.js documentation on Module Path Aliases (https://nextjs.org/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases).
If the issue persists, it might be related to a specific issue with Next.js. There are open issues on the Next.js GitHub repository related to module resolution in the App Router (#65564 (https://github.com/vercel/next.js/issues/65564)) and with modules using sub-path imports (#58052 (https://github.com/vercel/next.js/issues/58052)). You might find more information or potential solutions in the discussions there.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
@lament plank kapa.ai is still learning and improving, please let us know how it did by reacting below