Can't resolve '@/prismicio/next

Hi there!

First time poster, long time reader here. I'm trying to follow the tutorial in this Youtube video and I got stuck after trying to set up my header.

The error I get reads:

Module not found: Can't resolve '@/prismicio/next'
  1 | import { createClient } from "@/prismicio";
> 2 | import { PrismicNextLink } from "@/prismicio/next";
  3 |
  4 | export default async function Header() {
  5 |   const client = createClient();

Import trace for requested module:

I think I'm experiencing an issue similar to this post.

I've upgraded to the latest version of Next.js and even went ahead and installed @prismicio/next (I used @prismicio/next --force)

Not sure if it's related, but prior to the error I was getting this warning:

 ⚠ metadata.metadataBase is not set for resolving social open graph or twitter images, using "http://localhost:3000". See
 ⨯ Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)

I had to kill terminal and run dev again every time I wanted to see my changes in Header.tsx published in localhost:3000.

I'm not sure why I'm stuck. Any help would be appreciated!


Hey Luis,

It looks like you hav a typo in your import statement:

import { PrismicNextLink } from "@/prismicio/next";

The module is @prismicio/next, not @/prismicio/next.



Oh man, this is what I get for doing this after work at late hours. Thank you so much!