Shareable preview link gives blank page

I'm using Next.JS hosted on Vercel.

After figuring out that CSP was blocking some of the scripts used by the toolbar I've got previews working, and the prismic toolbar renders and seems to function ok ... but there is an error in the console:

Uncaught Error: Unexpected message received by the iframe: [object MessageEvent]. Expected setup_port
initialisationMessageHandler https://leeconlin.prismic.io/prismic-toolbar/4.0.5/iframe.html:16
e https://leeconlin.prismic.io/prismic-toolbar/4.0.5/iframe.html:16
[iframe.html:16:20732](https://leeconlin.prismic.io/prismic-toolbar/4.0.5/iframe.html)
initialisationMessageHandler https://leeconlin.prismic.io/prismic-toolbar/4.0.5/iframe.html:16
e https://leeconlin.prismic.io/prismic-toolbar/4.0.5/iframe.html:16

The main problem I'm having is that when I try to get a sharable link for a page that is not yet published the link I'm given seems to just render a blank white page. No errors.

Can anyone help me figure out why it's not working?

Hi Lee,

Their issue is that Sharable Previews don’t work with Next.js in static mode. The problem is that the person clicking on the sharable preview link doesn’t enter preview mode, so they will always see the published version. In the case of an unpublished page, that will be a blank page or the 404 page.

I can’t think of a workaround for this at the minute. Although we have reached out to Next.js to see if we can work closely together on our preview systems to resolve issues like this.

Thanks.

I have fallback mode enabled on all of the pages. Shouldn't that be able to handle the rendering of pages that are not yet published?

Yes, this will work for someone previewing from Prismic, but this won't trigger the Next.js preview mode from outside the dashboard.

Preview issue aside then, is there any way to get the iframe error fixed? It seems to have been around and reported for a while with no official response: Unexpected message received by the iframe: [object MessageEvent]. Expected setup_port · Issue #60 · prismicio/prismic-toolbar · GitHub

Hey Lee,

The team just gave a response in the thread you shared.

I replied there with some details.

Going back to the preview issue - wouldn't the new features in Next.JS 10's getStaticProps (rewrites and redirects) allow the preview data to be picked up and actioned?

We've actually open up dialogue with the team over at Next.js to try and get our preview systems to work better together, there's no advancement yet, but hopefully in the near future we can find solution to these issues.

2 Likes

This thread is being monitored as an open ticket in the issue tracker. We will update this post as we get more information. If you have a similar use-case, you can ‘Flag’ this topic to reopen.

Any update on getting sharable previews to work with with Next.js? We have the same issue and it's becoming more of a nuisance for our team. Thanks!

Hi Jeremy,

The difficulties surrounding Next.js and shareable Previews is because of statically generate pages, so the Next.js preview route ~/pages/api/preview is not automatically triggered to start preview mode.

The team plans to work on a prismic-next plugin in the new year.

In the meantime, we have a workaround for making shareable previews work in our projects. I'm working on documenting this at the minute and I will share it with you here once I'm done.

Thanks.

Hi again Jeremy,

I updated our next.js previews documentation to include a section about helpers which will enable you to have shareable links. A warning though shareable links for pages that have never been published still don't work so I'm still looking into this.

Thanks.

A post was split to a new topic: Shareable preview link