Module not found: Can't resolve 'next/navigation'

waleed-alfaifi commented 1 year ago

I am just starting out installing dependencies as in the starter docs and as soon as I add the <PrismicPreview>...</PrismicPreview> part, I get the following error:

../../node_modules/@prismicio/next/dist/PrismicPreviewClient.js:5:0
Module not found: Can't resolve 'next/navigation'

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

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

After some digging in the @prismicio/next module, I found that the src/PrismicPreviewClient.tsx is using next/navigation which does not seem to be exported by next nor is it documented in their website. Removing that liner actually solves the problem.

Is this to support the new app router? Well in that case this breaks the existing pages router!

Versions

@prismicio/next: v1.1.0
next: v12.3.1
node: v16.19.0

Reproduction

Additional Details

In the pages/_app.tsx file I added the following:

import { PrismicProvider } from '@prismicio/react'
import { PrismicPreview } from '@prismicio/next'
import { repositoryName } from '../../prismicio'

<PrismicProvider>
   <PrismicPreview repositoryName={repositoryName}>
           ...
   </PrismicPreview>
</PrismicProvider>

Steps to reproduce

Please follow the steps at the setup Prismic docs

What is expected?

Expected the app to work normally with preview supported

What is actually happening?

The app breaks and shows the above error message.

github-actions[bot] commented 1 year ago

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

waleed-alfaifi commented 1 year ago

Moreover I also get the same error for the following modules:

next/headers which is used in src/enableAutoPreviews.ts
next/navigation which is again used in src/redirectToPreviewURL.ts

Replacing them with the following imports worked, respectively:

import { getCookieParser as cookies } from 'next/dist/server/api-utils'
import { redirect } from 'next/dist/server/api-utils'

But I don't think these packages should be used as they are not documented and will probably change without any further notice.

angeloashmore commented 1 year ago

Hi @waleed-alfaifi, thanks for the detailed report!

@prismicio/next v1.0 and later requires at least Next.js 13.0, which should include the modules you listed (including next/navigation).

Upgrading from Next.js 12 to 13 should be a straightforward upgrade. See the upgrade guide here: https://nextjs.org/docs/pages/building-your-application/upgrading/version-13

If you are still experiencing issues with @prismicio/next after upgrading to Next.js 13, please comment here again and I will investigate.

Thank you! 🙂

waleed-alfaifi commented 1 year ago

@angeloashmore OK that might solve the problem but you should really mention it in the docs that you don't support Next 12 anymore. That way one won't have to go through the trouble of debugging a problem that should have not existed.

angeloashmore commented 1 year ago

@waleed-alfaifi It is mentioned in @prismicio/next's documentation: https://prismic.io/docs/technical-reference/prismicio-next

If you are using the latest version of npm, you'll also get a warning or error if your version of Next.js does not meet the minimum requirements (see the version listed in package.json).

However, it isn't listed in the main Prismic + Next.js guides. I'll make sure we add that note. Thanks for the feedback!

prismicio / prismic-next