Preview Toolbar errors out when I'm using a repo with accessToken

Hello,

My preview work, but my toolbar errors out and I can't find what's the error. Just the other day I integrated a Preview for another client (who doesn't have accessToken) and it worked great. Now I'm integrating the Preview for existing Prismic website (but migrating to another framework) and they have an accessToken, but I get the following error when trying to implement it. From what I can see, the only difference between the two is that the latter has an accessToken

Failed to load resource: the server responded with a status of 404 ()
iframe.html:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

My preview toolbar script is in _document.tsx as described in the documentation

        <Head>
          <script
            async
            defer
            src={`//static.cdn.prismic.io/prismic.js?repo=${prismicRepoName}&new=true`}
          />
        </Head>

Any other ideas how I could debug this?

Thanks,
Kris

Hello @kris, thanks for reaching out!

It seems like something in your application is broken.

  • Which framework are you using in your project?
  • How is your preview configuration setup?
  • Have you loaded the preview script on all pages of your application?

Also, here's a troubleshooting guide that you might find helpful

Hi @Paulina - thanks for the reply

  • I'm using NextJS with @prismicio/client 4.0.0 & Slice Machine, typescript.
  • It's identical to Previews with Next.js - Prismic
  • Yes, as per docs - I have loaded it in _document.js

The troubleshooting article was not helpful unfortunately. Any advise to how to get this going will be much appreciated!

I've tried opening a preview link in Chrome, Opera & Safari but the error message was the same.

The interesting thing is that I worked on another client's project with a similar setup, and it worked flawlessly. The main differences with this project is

  • already existing project
  • has accessToken

Let me just saw again that the preview function is working - the problem is that the toolbar errors out

Hi @Paulina - any updates on this? My preview iframe still errors out and I can't quite figure it out. Repo name is kontist-demo - it works for the existing website (built in svelte) but it errors out in the nextjs website we are building

Hey, have you tried deleting the cache from your browser and tried again? Sometimes the preview session cookies interfere with the new sessions.

Can you show me a screenshot of the error appearing in the toolbar?

@Paulina I tried deleting the cache, but that's not the problem. I also tried in Safari and my colleague also tried, but the error remains the same.

Here is a screenshot of my console.

In my DOM, my script is outputted as the following:

<script async="" defer="" src="https://static.cdn.prismic.io/prismic.js?new=true&amp;repo=kontist-demo"></script>

Hi Kris,

This should work for you now, it seems this repo was on the old toolbar.

Thanks.

That's amazing, thanks a lot for the help!

Hey,

Unfortunately the problem appeared all of the sudden once again.

This is what happens once I preview unpublished documents or documents which have new changes (but not yet published).

As before, the preview works and I can see the unpublished changes in my browser. However the toolbar doesn't show up and I get these errors in the console.

A note worth noting is that if I preview a document with no changes (so identical to production), there are no errors and I see the toolbar successfully.

Something weird is going on, but I can't figure it out. Any help will be greatly appreciated