Preview redirects to HomePage

[alexlopezleon (hhhhaaarry Brown)]

Hi, I'm developing a Nuxt Site using prismic. I've configured the preview for production and local, but i'm having the same issue in both environments. When we press preview it generates an url but almost inmediatly it redirects to homepage.

I'm using i18n to manage the 3 locals (english, spanish and catalan). It works by adding a lang prefix (/en-us/folder-name/[uid]) if the locale is not the default one. In my case i have default locale set to catalan in prismic and in nuxt i18n.

I also setted the preview url to be /api/preview in prismic and in nuxt

Here is my nuxt.config.ts file

 i18n: {
    locales: [
      {
        code: "ca",
        name: "Cat",
        file: "ca.json",
      },
      
      {
        code: "es-es",
        name: "Cast",
        file: "es.json",
      },
      {
        code: "en-us",
        name: "En",
        file: "en.json",
      },
    ],
    defaultLocale: "ca",
    langDir: "lang/",
  },

prismic: {
    endpoint: "wavm",
    preview: "/api/preview",
    clientConfig: {
      routes: [
        {
          type: "page",
          path: "/:uid",
        },
        {
          type: "page",
          uid: "home",
          path: "/",
        },
        {
          type: "page",
          uid: "about",
          path: "/about",
        },
        {
          type: "page",
          uid: "case-studies",
          path: "/case-studies",
        },
        {
          type: "page",
          path: "/case-studies/:uid",
        },
      ],
    },
  },

Thanks

Alex

[Ezekiel (Ezekiel Ravidat)]

Hi @alexlopezleon,

Welcome to the community

It looks like you have two conflicting page paths:

{
type: "page",
path: "/:uid",
},

{
type: "page",
path: "/case-studies/:uid",
},

Try resolving that conflict, and see if it fixes your issue. Let me know how that goes!

[alexlopezleon (hhhhaaarry Brown)]

Sorry Ezekiel, i didn't know you answered. First of all thanks for your reply.

As i said, i'm using i18n with a /lang/ prefix in paths, with the exception of the defaultLocale that doesn't use /lang/ prefix.

I have changed my prismic object in nuxt.config and now it doesn't redirects me to the home page, but to the non preview version of the page. For example, if i edit /archive page in english, and hit preview, it redirects me to the correct lang and path, but not in preview mode, i just see the published version (en-us/archive), so i can't see the unpublished changes, only the ones i published.

Here you have my new routes array, and a screenshot of my pageTypes.

prismic: {
    endpoint: "wavm",
    preview: "/api/preview",
    clientConfig: {
      routes: [
        {
          type: "home", // API ID para Home
          path: "/:lang?/",
        },
        {
          type: "archive", // API ID para Archive Page
          path: "/:lang?/archive",
        },
        {
          type: "about", // API ID para About
          path: "/:lang?/about",
        },
        {
          type: "case_study", // API ID para Case Study
          path: "/:lang?/case-studies/:uid",
        },
        {
          type: "page", // API ID para Page
          path: "/:lang?/:uid",
        },
      ],
    },
  },

Thanks for everything.

Alex

[Ezekiel (Ezekiel Ravidat)]

Hi again @alexlopezleon,

Can you share your modified nuxt.config file, and how your preview is set up in your project?

[alexlopezleon (hhhhaaarry Brown)]

Hi @Ezekiel, thanks again, here you have my full nuxt.config file:

import { repositoryName } from "./slicemachine.config.json";
import pkg from "./package.json";

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: {
    enabled: false,
  },
  runtimeConfig: {
    public: {
      version: pkg.version,
      posthogPublicKey: process.env.POSTHOG_PUBLIC_KEY,
      posthogHost: "https://eu.i.posthog.com",
    },
  },
  i18n: {
    locales: [
      {
        code: "ca",
        name: "Cat",
        file: "ca.json",
      },
      
      {
        code: "es-es",
        name: "Cast",
        file: "es.json",
      },
      {
        code: "en-us",
        name: "En",
        file: "en.json",
      },
    ],
    defaultLocale: "ca",
    langDir: "lang/",
  },
  app: {
    head: {
      // title: "WAVM | We Are Visual Makers",
      // htmlAttrs: {
      //   lang: "en-US",
      // },
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        // { hid: "description", name: "description", content: "WAVM. Committed to create interactions between people and culture through audiovisual language research. Get in Touch. Contact Us +34 93 419 27 30. weare@wavm.studio" },
        { name: "format-detection", content: "telephone=no" },
        // { property: "og:image", content: "/og_image.png" },
      ],
      link: [{ rel: "icon", type: "image/x-icon", href: "/faviconWavm3.png" }],
    },
  },
  css: ["~/assets/css/fontface.css", "~/assets/css/main.css"],
  modules: [
    "@nuxtjs/prismic",
    "@nuxtjs/tailwindcss",
    "@pinia/nuxt",
    "@nuxt/image",
    "nuxt-swiper",
    "@hypernym/nuxt-anime",
    "@nuxtjs/device",
    "@nuxtjs/i18n",
    "@nuxt/icon",
  ],
  build: {
    transpile: ["vue-grid-overlay", "gsap"], // Asegura la compatibilidad del paquete con Nuxt
  },
  image: {
    // prismic: {}
    provider: "prismic",
  },
  postcss: {
    plugins: {
      "postcss-import": true,
      tailwindcss: {},
      autoprefixer: {},
      cssnano:
        process.env.NODE_ENV === "production"
          ? { preset: ["default", { discardComments: { removeAll: true } }] }
          : false, // disable cssnano when not in production
    },
  },
  plugins: ["~/plugins/grid-overlay.js"],
  prismic: {
    endpoint: "wavm",
    preview: "/api/preview",
    clientConfig: {
      routes: [
        {
          type: "home", // API ID para Home
          path: "/:lang?/",
        },
        {
          type: "archive", // API ID para Archive Page
          path: "/:lang?/archive",
        },
        {
          type: "about", // API ID para About
          path: "/:lang?/about",
        },
        {
          type: "case_study", // API ID para Case Study
          path: "/:lang?/case-studies/:uid",
        },
        {
          type: "page", // API ID para Page
          path: "/:lang?/:uid",
        },
      ],
    },
  },
});

And here you have my preview configuration inside prismic.

Thanks

[Ezekiel (Ezekiel Ravidat)]

Thank you for that!

Are you seeing this issue when you're previewing in production, locally, or both?

[alexlopezleon (hhhhaaarry Brown)]

Hello, it happens on both. When i hit preview, i can see the preview url imn the browser but suddenly after a second it redirects to the non-preview url. Also it respects locales, if i hit preview on an specific locale, it redirects me to the non-preview url of that locale.

I also use custom page transitions using gsap, but i don't know if it has nothing to do with it.

Sorry if i answer late, i don't recieve notifications on mail and i'm responding from time to time.

[Ezekiel (Ezekiel Ravidat)]

Hi @alexlopezleon,

No worries for the late answers

It could be a cache issue. Have you tried to see if this is happening on different browsers?

We have a preview troubleshooting guide that covers a lot of the different errors that might occur, you could give it a go and see if anything fixes your problem:

Troubleshooting: Previews

This article is designed to help you troubleshoot Prismic Previews. NextJS If you're using Next.js make sure you have covered all the following setup steps. Install @prismicio/next to handle previews Add the PrismicPreview component to the root of your app Configure the preview routes Ensure your Prismic repository has the correct preview route Other frameworks Have you added the Prismic preview toolbar script to your site? Check in the <head> or <body> of your pages to make sure the script …

If nothing above helps, could you give me a link to your github project so I can test it on my end? Feel free to send it to me via DM if you'd like to keep it private. Thanks!

[alexlopezleon (hhhhaaarry Brown)]

Hi ezekiel,

I have read the guide and my browser is showing and error with io.prismic.preview and io.prismic.previewSession cookies.

Is there any way to know the api ref in the cookie (it doesn't show up in the inspector) to test the guide url: https://your-repo-name.prismic.io/api/v2/documents/search?ref=the-api-ref-in-your-cookie

Here's an image of the error, it translates to "The cookie blah blah has been rejected because of a non valid domain"

`I'll send you a link to my repository via DM, ask for permission and i will grant it. (I'm working on development branch)

[alexlopezleon (hhhhaaarry Brown)]

I'm going to test the solution in this post. I'm using firefox dev edition and i set the enhanded security to the highest tier.

Preview mode issue Firefox

We’re trying to get our pages set up to support preview and are running into issues, specifically with Firefox (Chrome works fine). I’m getting this error in the Firefox console: Cookie "io.prismic.preview" has been rejected for invalid domain. Is there something we have to do to allow the prismic.js file to set the io.prismic.preview cookie? We've gone through all the documentation on how to set up previews and none of the Troubleshooting steps seem to help either. Thanks! David

[alexlopezleon (hhhhaaarry Brown)]

I think i solved it. You have to press save to view changes in preview? if the answer is yes, i solved it by disabling enhanced cookie protection in firefox. I followed this solution

Thanks @Ezekiel for the awesome support.

Preview mode issue Firefox

We’re trying to get our pages set up to support preview and are running into issues, specifically with Firefox (Chrome works fine). I’m getting this error in the Firefox console: Cookie "io.prismic.preview" has been rejected for invalid domain. Is there something we have to do to allow the prismic.js file to set the io.prismic.preview cookie? We've gone through all the documentation on how to set up previews and none of the Troubleshooting steps seem to help either. Thanks! David

[Ezekiel (Ezekiel Ravidat)]

Awesome, thanks for getting back to us with what worked for you