Preview mode cookie missing from non-local environment

Developing with Prismic
,
1

Hi,
I am working on getting the prismic preview toolbar working on a nextjs site I am working on. The preview toolbar is showing up fine when I run the site locally. However once I deploy it to Vercel and try to access the preview link from prismic, it does not show up in other environments…

Upon inspection the io.prismic.preview cookie is missing.

This is my code for /api/preview:

import { setPreviewData, redirectToPreviewURL } from '@prismicio/next';

import { createClient } from '../../prismicio';

export default async function handler(req, res) {
	const client = createClient({ req });

	await setPreviewData({ req, res });

	return await redirectToPreviewURL({ req, res, client });
}
3

Hi @bone ,

Can you record an attempt to preview some content from Prismic in your browser using this plugin?

It will help provide logs to debug this.

Thanks.

4

I've recorded a video here:

I've attempted to preview from localhost then from staging with two different results.

Cheers,
Pete

5

In the video you've shown me, you were trying to preview a document with no draft content. I can't rule out that the deployed website (staging) isn't triggering the preview mode because the is no draft content to preview.

6

Hi Phil,

So I figured out the issue, it was on my side!

I use Brave browser and it was blocking the cookie, funnily enough I also tried on Chrome and forgot I had an extension that was also blocking cookies.

Cheers,
Pete

1 Like
7

I'm glad you were able to figure this out :slight_smile:

For future readers this is also something listed in our preview troubleshooting guide: