prismicio/prismic-next

NextRouter was not mounted error using PrismicPreview

Closed this issue · 2 comments

MKlblangenois commented

Versions

  • @prismicio/next: v1.0.2
  • next: v13.1.1
  • node: v16.14.0

Reproduction

When I'm trying to add <PrismicPreview /> inside my page, I got an error from NextJS

Additional Details

Code used :

// ./app/layout.tsx

"use client";

import { PrismicProvider } from "@prismicio/react";
import Link from "next/link";
interface RootLayoutProps {
	children: React.ReactNode;
}

const RootLayout: React.FC<RootLayoutProps> = ({ children }) => {
	return (
		<html lang="fr">
			<head />

			<body>
				<PrismicProvider
					internalLinkComponent={(props) => <Link {...props} />}
				>
					<div>{children}</div>
				</PrismicProvider>
			</body>
		</html>
	);
};

export default RootLayout;
// ./app/page.tsx

"use client";

import { PrismicPreview } from "@prismicio/next";
import { repositoryName } from "../library/prismic";

const Page = () => {
	return (
		<PrismicPreview repositoryName={repositoryName}>
			<h1>Hello world!</h1>
		</PrismicPreview>
	);
};

export default Page;

What is actually happening?

Got an error from NextJS : Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted.

Possible way to fix that

When I look to vercel/next.js#43585, It seems like replace next/router by next/navigation (used inside PrismicPreview.tsx on line :58 for useRouter) can solve this issue.

github-actions commented

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 commented

Hi @MKlblangenois, thanks for the report!

@prismicio/next does not support Next.js's beta app directory at this time. We are waiting for the feature to stabilize before supporting it since it will require significant changes to the package.

You can find more details about this decision here: #48 (comment)

Since that comment was written, Next.js's app directory feature has improved, but we prefer waiting until it is more mature.

If you have any questions, please let us know! 🙂

  • 👀1