Using <Link> leads to rendering error

[MehediH]

Hi! I am moving an app I built with React to Next.js, and I ran into a really weird issue. I have a page that is literally just text content, with a few links. However, when I try to use <Link>, I get the "Element type is invalid" error.

Here's my code:

<section>
     <p>
           ...
           <Link href="/store">
             <a>on this page.</a>
           </Link>
          ...
     </p>
</section>

Here's the error:

Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I am not sure what I am doing wrong, but removing the gets rid of the error.

Any pointers as to what I could be doing wrong? Thank you!

[rafaelalmeidatk]

Are you sure you are importing Link like this?

import Link from 'next/link'

If you are already doing that, I would need more info to know what may be happening, a reproduction with the error would help a lot

[MehediH]

Omg I am so stupid, I was importing it like this:

import { Link } from "next/link";

Thank you so much!