CODEWITHSUNDEEP
reactjsnext.js
nacr amri
nacr amri

Reputation: 11

Nextjs 14 app: Module not found: Can't resolve '@/components/layout/Hero'

/**I am new to Next js, i am running Nextjs 14, am getting error: Module not found: Can't resolve '@/components/layout/Header' when compiling, i can't tell what's the problem since the component is exported normally. At first it worked fine and rendered the component, where i imported and added before {children} in RootLayout() function. Now it does not work and it does the same with the other component 'Hero.js'

I tried to write the Header code in RootLayout function, inside <body>, before the {children}, still it does not work, where as for now it throws same error to 'Hero' component inside 'app/page.js' file. **/

import Link from 'next/link';

export default function Header(){
    return(
        <header className="flex items-center justify-between">
            <Link href={''} className="text-primary font-semibold text-3xl">ST PIZZA</Link>
            <nav className="flex gap-8 items-center text-gray-500 font-semibold">
                <Link href={''}>Home</Link>
                <Link href={''}>Menu</Link>
                <Link href={''}>About</Link>
                <Link href={''}>Contact</Link>
            </nav>
            <nav className="flex items-center text-center gap-7 font-semibold text-gray-400">
                <Link href={'/login'}>Login</Link>
                <Link href={'/register'} className="bg-primary px-8 py-2 rounded-full">Register</Link>
            </nav>
        </header>
    );
}




import { Roboto } from 'next/font/google'
import './globals.css'
import Link from "next/link";
import Header from "@/components/layout/Header";
const roboto= Roboto({ subsets: ['latin'], weight:['400', '500', '700']})

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
       <main className="max-w-6xl mx-auto p-4">
           <Header/>
           {children}
           <footer className="border-t p-8 text-center text-gray-500 mt-16">
               &copy; 2023 All rights reserved
           </footer>
       </main>
      </body>
    </html>
  )
}

Upvotes: 1

Views: 1950

Answers (2)

Mayank Kumar Chaudhari
Mayank Kumar Chaudhari

Reputation: 18538

Make sure your tsconfig.json file is properly configured.

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./src/*"]  <-- if you are not using src directory then simply ["./*"]
    }
  }
}

Upvotes: 1

Sahar
Sahar

Reputation: 81

I think there is something wrong with typescript path alias(in your case is @). Checkout this solution, It helped with my case: https://stackoverflow.com/a/50888885/10434997

Upvotes: 0

Related Questions