soft mantle
Build Error
Failed to compile
Next.js (14.2.4)
./app/components/CategorySearch.jsx:2:1
Module not found: Can't resolve '@/components/ui/button'
1 | import React from 'react'
2 | import { Button } from "@/components/ui/button"
| ^
3 | import { Input } from "@/components/ui/input"
4 |
5 | function CategorySearch() {
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./app/page.js
gray boneBOT
Hi @soft mantle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
It looks like you're encountering a "Module not found" error when trying to import a component using a module path alias in Next.js 14.2.4. This issue is often related to the configuration of module path aliases in your project.
Next.js supports Module Path Aliases (https://nextjs.org/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases) to make it easier to manage imports in deeply nested project files. However, if these aliases are not correctly configured, you will encounter errors like the one you're seeing.
Here's how you can configure module path aliases in your jsconfig.json or tsconfig.json file:
Create or Update jsconfig.json or tsconfig.json:
Ensure you have a jsconfig.json or tsconfig.json file at the root of your project. If you don't have one, create it.
Add Path Aliases Configuration:
Add the following configuration to your jsconfig.json or tsconfig.json file to define the path aliases:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/components/*": ["components/*"],
"@/config/*": ["config/*"],
"@/errors/*": ["errors/*"]
}
}
}
This configuration tells the compiler where to find the modules when you use the @/ prefix.
Restart Your Development Server:
After updating the configuration, restart your Next.js development server to apply the changes.
Here is an example of how your import statements should look after configuring the path aliases:
// before
import { Button } from '../../../components/ui/button'
// after
import { Button } from '@/components/ui/button'
For more detailed information, 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 you continue to experience issues, ensure that the paths in your configuration match the actual directory structure of your project.
References: