CODEWITHSUNDEEP
javascriptvisual-studio-codenext.jstailwind-css
gj_dev
gj_dev

Reputation: 23

Module not found: Can't resolve '@/components/Header' - Next.js

I'm working on a Next.js project and have run into an issue with importing a component. I created a directory under the 'src' folder named 'components', where I have a file called 'Header.js'. This file contains a function component named 'Header'. I'm trying to import this 'Header' component into my 'page.js' file using the following import statement:

import Header from "@/components/Header";

But I get the following error: Module not found: Can't resolve '@/components/Header'

I've checked and confirmed that the file exists at the correct location, and the path seems correct. Here's the structure of my project for reference:

src/
├── components/
│   └── Header.js
└── pages/
    └── page.js

Header.js

export default function Header() {
  return(
    <header className="bg-white border-b flex justify-between p-4">
        <div className='flex gap-6'>
        <Link href={'/'}>Linkify</Link>
        <nav className='flex items-center gap-4 text-slate-500 text-sm'>
          <Link href={'/about'}>About</Link>
          <Link href={'/pricing'}>Pricing</Link>
          <Link href={'/contact'}>Contact</Link>
        </nav>
        </div>
        <nav className='flex items-center gap-4 text-sm text-slate-500'>
          <Link href={'/login'}>Sign In</Link>
          <Link href={'/register'}>Create Account</Link>
        </nav>
      </header>
  )
}

page.js

import Header from "@/components/Header";


export default function Home() {
  return (
    <main>
      <Header />
      <section>

      </section>
    </main>
    
  )
}

Any help is appreciated, thanks!

Upvotes: 1

Views: 1804

Answers (1)

thvroyal
thvroyal

Reputation: 156

To use it, you need to declare the alias path for @ in the file tsconfig.json. Try adding these config below:

{   compilerOptions: {
      ...
      "paths": {
         "@/*": [
           "./*" // -> change the path to what you you want
         ]
      },    
    }
}

Upvotes: 1

Related Questions