Can't resolve '@/prismicio/next

Developing with Prismic
1

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:

./src/components/header.tsx:2:0
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();

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/app/layout.tsx

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 https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase
 ⨯ 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!

Thanks,
Luis

3

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.

Sam

2 Likes
5

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

2 Likes