Prismic toolbar not working on production

[non-linear]

Hi, does anyone know why the prismic toolbar does not link to the main document? is there any workaround for this issue?

Thanks in advance

Versions

• nuxt: ^2.15.3
• @nuxtjs/prismic: ^1.4.2
• node: 16.X on vercel

Steps to reproduce

Perform any navigation on the frontend (production)

What is Expected?

The prismic toolbar should display a link to the main document on prismic.io

What is actually happening?

The prismic toolbar display a wrong link to the main document on prismic.io

[Lucie]

Hi, can you share more details about your setup? Especially what's your rendering mode? (static, SSR, edge, etc.)

[non-linear]

Nuxt2 Static Generation on Vercel:

import { resolve } from 'path'
import { apiEndpoint } from './sm.json'
const getAppRoutes = require('./utils/getRoutes.js');

const isGenerate = process.env.generate == 'true'
const isDev = process.env.NODE_ENV !== 'production';

export default {
  server: {
    port: process.env.port, // default: 3000
    host: process.env.NUXT_HOST ? process.env.NUXT_HOST : 'localhost', // default: localhost
  },

  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',
  modern: !isDev,
  ssr: true,
  // Global page headers: https://go.nuxtjs.dev/config-head
 ...head stuff...

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    './assets/css/media.less',
    './assets/css/fonts.less',
    './assets/css/style.less',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/filters',
    '@/plugins/globalComponents',
    { src: '@/plugins/clientFunctions.js', ssr: false, mode: 'client' },
    { src: '@/plugins/functions.js' },
  ],
  pageTransition: {
    name: 'my-page',
    mode: 'out-in',
  },

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // devModules: ['@nuxtjs/eslint-module'],

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/style-resources',
    // '@nuxtjs/eslint-module',
    // '@nuxtjs/html-validator',
  ],
  prismic: {
    endpoint: apiEndpoint,
    modern: true,
    linkResolver: "~/utils/linkResolver",
  },
  image: {
    domains: ['https://images.prismic.io'],
    provider: 'prismic',
    dir: 'assets/img',
    staticFilename: 'dist/images/[name]-[hash][ext]',
    prismic: {
      modifiers: {
        quality: 90,
      },
    },
    presets: {
      avatar: {
        modifiers: {
          format: 'webp',
        },
      },
    },
    screens: {
      xs: 540,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      xxl: 1536,
    },
  },

  styleResources: {
    less: './assets/css/variables.less',
  },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxt/image',
    '@nuxtjs/sitemap',
    'nuxt-basic-auth-module',
    ["@nuxtjs/prismic", {
      endpoint: apiEndpoint|| ""
    }],
    ["nuxt-sm"],
    [
      'nuxt-lazy-load',
      {
        directiveOnly: true,
        defaultImage:
          'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
      },
    ],
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ["@prismicio/vue", "vue-slicezone", "nuxt-sm"],
    extractCSS: true,
    extend(config, ctx) {
      //  Create the webmanifest rule
    },
  },
  redirect: [
    // Redirect options here
    {
      // eslint-disable-next-line
      from: '(?!^/$|^/[?].*$)(.*/[?](.*)$|.*/$)',
      to: (from, req) => {
        const base = req._parsedUrl.pathname.replace(/\/$/, '') // We take pathname instead of req.url because of the query parameters
        const search = req._parsedUrl.search
        return base + (search != null ? search : '')
      },
      statusCode: 301,
    },
  ],
  basic: {
    name: process.env.name,
    pass: process.env.pass,
    enabled: process.env.check_pass === 'true', // require boolean value(nullable)
  },
  sitemap: {
    hostname: process.env.ORIGIN_URL,
    path: '/sitemap.xml',
    cacheTime: 1000 * 60 * 60,
    trailingSlash: false,
    gzip: true,
    exclude: [
      '/**/*' // remove all static routes
    ],
    defaults: {
      lastmod: new Date()
    },
    async routes() {
      return await getAppRoutes();
    },
  },
  env: {
    build: process.env.build === 'true' ? true : false,
    check_pass: process.env.check_pass,
    ORIGIN_URL: process.env.ORIGIN_URL,
  },
  axios: {
    proxy: false,
  },
  alias: {
    '@assets': resolve(__dirname, './assets/'),
  },

  generate: {
    exclude: ["*"],
    interval:250,
    async routes() {
      const response = await getAppRoutes()
      return response.map(({ url }) => url)
    }
  },
}

[Lucie]

Got it, thanks!

This is a limitation (bug to some extent) of the toolbar. Basically, the toolbar can only detect documents properly when documents are actually fetched when browsing the page.

In the case of a static site, those documents are fetched at build time, so documents, if any, indicated by the toolbar on a static site can be quite inaccurate.

We've been tracking and discussing that here in order to figure out a better way to keep the toolbar working for static site: prismicio/prismic-toolbar#94, I'll close this issue here to prevent duplicate conversation, hope you understand, and you're more than welcome to chime in on the other issue!