Module not found: Can't resolve 'next/headers' - PrismicPreview

[tylerpashigian]

I have followed the official docs for installation and loading data, and in both scenarios I get a NextJS error saying Module not found: Can't resolve 'next/headers'. I have read through the docs in detail and have made sure all imports are coming from the correct files according to the docs.

I am getting the same error when both adding the preview component, as well as trying to fetch data. I specified more about the specific error and reproduction steps below. I have created a custom page and a slice via slicemachine and am able to preview that successfully in the slicemachine.

Versions

• @prismicio/next: v^1.3.2
• next: v12.2.5
• node: v16.17.0

Steps to reproduce

Add either <PrismicPreview /> to _app.tsx or load data via creating a client in static props as specified in the docs.

What is expected?

I believe should be loading data/seeing previews, but I'm not positive because this is the first step in project setup.

What is actually happening?

I am getting the following error (replace _app.tsx with whichever file I am loading data from, but this is from adding <PrismicPreview /> to _app.tsx):

../../node_modules/@prismicio/next/dist/PrismicPreview.js:3:0
Module not found: Can't resolve 'next/headers'

Import trace for requested module:
../../node_modules/@prismicio/next/dist/index.js
./prismicio.ts
./pages/_app.tsx

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

[github-actions]

This issue has been labeled as a bug since it was created using the 🚨 Bug Report Template.

Hi there, thank you so much for the report!

Following our Maintenance Process, we will review your bug report and get back to you next Wednesday. To ensure a smooth review of your issue and avoid unnecessary delays, please make sure your issue includes the following:

• Information about your environment and packages you use (Node.js version, package names and their versions, etc.)
  Feel free to attach a copy of your package.json file.
• Any troubleshooting steps you already went through
• A minimal reproduction of the issue, and/or instructions on how to reproduce it

If you have identified the cause of the bug described in your report and know how to fix it, you're more than welcome to open a pull request address it. Check out our quick start guide for a simple contribution process.

If you think your issue is a question (not a bug) and would like quicker support, please close this issue and forward it to an appropriate section on our community forum: https://community.prismic.io

- The Prismic Open-Source Team

[angeloashmore]

Hi @tylerpashigian! You are seeing that error because @prismicio/next imports code from the next/headers module. next/headers only exists starting from Next.js 13, but you are running Next.js 12.

@prismicio/next requires Next.js >= v13.4.5 in order to fully support the App Router, next/image, and Prismic previews. Upgrading from Next.js 12 to 13 is fairly easy, and is explained in this guide: https://nextjs.org/docs/pages/building-your-application/upgrading/version-13

Updating to Next.js >= v13.4.5 should fix the issue. Please let me know if you have any questions. Thank you!

[tylerpashigian]

Hey @angeloashmore! Thanks so much for the quick response. Just so I understand, there's no way to use prismic with Next v12? I thought this might be the case, but I asked the Prismic community and someone on the Prismic Support Team said Next v12 isnt the problem. Here's the discussion post: https://community.prismic.io/t/nextjs-v12-documentation/13504.

Is there any way to use an older version of prismic-next to support Next v12.x.x?

[angeloashmore]

@tylerpashigian Sorry for the confusion. Indeed, @prismicio/next is only compatible with Next.js 13 as of v1.0.0. You can see the reason for that requirement here: #48

If you are using Next.js 12, you can install the latest 0.1 version with the following command:

npm install @prismicio/next@^0.1

You can find technical documentation for v0.1 here: https://prismic.io/docs/technical-reference/prismicio-next?version=v0.1

However, I recommend upgrading to Next.js 13 and using the latest version of @prismicio/next. By using the latest versions, you'll benefit from fixes and new features.

[tylerpashigian]

@angeloashmore, yeah absolutely. I will look into the implications of the Next v13 upgrade. I am working on something that is approaching launch so we didn't want to make any large scale changes that could introduce unforeseen bugs but this may be required now. Thanks so much for your help. Ill respond if v0.1 doesnt resolve the issue Im facing and work on upgrading both Next and prismic-next in the near future.

[angeloashmore]

Sounds good! Yes, please feel free to reach out if you have issues using v0.1 and I’ll do my best to help.

[HolySamosa]

Ah. Same issue here. It would be great if the Next 13 requirement was added to the README.