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.

1 Like

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.