Preview frozen on "loading preview"

I have an issue where the preview doesn't seem to be working correctly in my nuxt project.

My preview setup looks like this:

And in nuxt.config.js I add the script to the end of the body:

This is the result I get:

I'm using this example project with all the latest dependencies and route resolver.

Also, I remember a prismic project I had earlier this year where you didn't need to add the script for the preview to work. So I guess this is new?

Anyway, what am I doing wrong here?

Hey @juliandrea,

You're right that you shouldn't need to add the script to your head. The @nuxtjs/prismic module handles that for you. (Documentation here.) Try removing the script from the head, and ensuring that your prismic module is configured correctly (documentation here).

Then, if you're still having issues, try the troubleshooting steps listed here.

I'll be out of the office next week, but if you have more questions, my colleague @Fares will be happy to help :slight_smile:

Best,
Sam

The prismic module is configured correctly, the only difference was that the '@nuxtjs/prismic' was under "modules" and not "buildModules", but changing that didn't make any difference.

I tried everything else in your links, but nothing is solving my issue.

This is currently my link-resolver, I don't know if I should change anything in there for the preview to work?

export default function(doc) {
  if (doc.isBroken) {
    return '/not-found';
  }

  if (doc.type === 'homepage') {
    return `/${doc.lang}`;
  }

  if (doc.type === 'page') {
    return `/${doc.lang}/${doc.uid}`;
  }

  return '/not-found';
}

I'm having the exact same issue

Hi Team,

Have you tried clearing your cookies and trying your preview again?

Yup, I did it again now for good measure. It's not helping.

Can you send a github link to your project so I can test it on my side?

I sent you a PM with the repo.

Hi Julian,

I really can't figure this one out. I've been testing locally and keep getting the same issue in your project. If after the preview is loaded you go manually to the url you were trying to preview for example:

http://localhost:3000/sv/logga-in

Then the preview cookie is loaded correctly on top of the browser and you can see you test data. This makes me think that the 404 page is not being hit which is where the application then grabs the link resolver data and know how to redirect to the correct page. But for some reasoon this isn't working.

It made me think the following setting in your nuxt.config wasn't set as below. Though when I tried this I still had the same issue.

generate: {
    fallback: '404.html' // Netlify reads a 404.html, Nuxt will load as an SPA
  }

After this few hours work I'm still no further forward so I'm going to have to get help from my team tomorrow to try and figure this one out.

Thanks for being patient.

Could it have something to do with the fact that i'm using slice machine? It has given me some unexpected bugs before.

By the way, fallback: true is the same as fallback: '404.html'. Nuxt doc says "If set to true, the filename will be 404.html": The generate Property - NuxtJS

I was able to narrow it down to a few things that weren't the problem.

  • It's not Slicemachine as I have 2 projects using it that are working fine.
  • It's not the browser, I tested it elsewhere with the same results.
  • It's not your plugins it seems, I removed a lot of them with the same results.
  • It's not coming from Prismic as the cookie is delivered to the browser fine.

I'm still looking in to why the linkresolver isn't being accessed/triggered for the redirect. from the preview screen.

Even when just developing locally and being logged into Prismic I get all these console errors. If I log out from Prismic they disappear, so it's not coming from my project.

This is because the previews toolbar isn't triggered when you're not logged in to Prismic, so it's normal you wouldn't see warnings to do with previews in that case. We disable the preview toolbar if you're not logged in so the preview code doesn't slow down your website for your regular users.

I get that, but here I was logged in, and as you can see I got multiple errors from the toolbar. Just figured it could be connected to the preview error I have.

Any progress with this issue?

If not, I think I might have to reverse-engineer to see where it breaks. I'll get back when I have a solution.

Hey Julian,

No progress on my side, I'm trying the same thing as you. Removing things from your app to see where the break is happening.

Hi Julian,

I've been able to recreate your issue in one of my projects. I'm investigating further and hopefully we'll find a solution soon.

Thanks.

1 Like

We've found a similar issue and are investigating further:

@juliandreas So my colleague @lihbr was able to figure this out:

Ok, after comparing lock files from the non-working tutorial and a fresh working install it was due to @nuxt/ufo which is a new URL handling helpers that got introduced in nuxt@2.14.12. Everyone that installed this patch since its release (16th of Decemeber) and before the 6th of January inherited the bug which has now been fixed with @nuxt/ufo@^0.5.3

To fix this issue users need to run npm update or yarn upgrade, this will bump the package version and fix it :slight_smile:

I have all the latest packages though, and the issue is still there :confused:

I even tried deleting the package-lock and node_modules and did a fresh install.