Duplicate Routes warning with 'prismic-preview' using Prismic's Nuxt Module

Developing with Prismic
1

Hello!

I keep getting this warning message on all Nuxt projects using the @nuxtjs/prismic module:

WARN [vue-router] Duplicate named routes definition: { name: "prismic-preview", path: "/preview" }

Curently my API configuration in nuxt.config.js leaves the preview's default value to true, and previews work properly. I did not create a separate preview route (/pages/preview.vue), so I have no idea why the default configuration would create this warning. Is there anything I can do to avoid it?

// in nuxt config
  prismic: {
    endpoint: apiEndpoint || '',
    modern: true,
    apiOptions: {
      routes: [
        {
          type: 'homepage',
          path: '/',
        },
      ],
      linkResolver(doc) {
        return null
      },
    },
  },

Thank you for your time! Please let me know if this has happened to anyone else.

3

Hello @danyaviless18

Welcome to the Pris ic community, and thanks for reaching out to us.

To investigate this, I need the following:

  1. Complete the nuxt.config.js file.
  2. Preview configuration in your repository.

Thanks,
Priyanka

1 Like
4

Thank you for your reply!

The complete nuxt.config.js would look like:

import { apiEndpoint } from './sm.json'
export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Sample Project',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [
      { rel: 'icon', type: 'image/png', href: '/icon.png' },
    ],
  },


  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ['~/assets/css/type.css', '~/assets/css/main.css'],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

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

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    '@nuxtjs/prismic',
  ],

  prismic: {
    endpoint: apiEndpoint || '',
    modern: true,
    apiOptions: {
      routes: [
        {
          type: 'homepage',
          path: '/',
        },
      ],
      linkResolver(doc) {
        return null
      },
    },
  },


  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
  ],

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'en',
    },
  },

  generate: {
    fallback: true,
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ['@prismicio/vue'],
  },
}

and my configuration on the repo is:

Screen Shot 2022-05-18 at 16.18.25
Screen Shot 2022-05-18 at 16.18.252138×786 36 KB

I was thinking perhaps it had to do with the pwa module? But I'm not so sure.

Thanks again for your time! :slight_smile:

5

Hello @danyaviless18 Could you try to remove linkResolver function and test it again?

6

I tested it and the duplicate routes message seems to be gone. (Yay! :slight_smile: )

The reason for using that function was that I occasionally got a warning to provide a linkResolver function, since I prefer only using route resolver. According to the documentation:

If you include both resolvers in your project, it will first use the Link Resolver. If the Link Resolver returns null, the Route Resolver will be used.

Is there a proper way to set the linkResolver function (as I attempted) so that it redirects to the route resolver? As it is right now (providing route resolver and no linkResolver function), I don't get this warning anymore, but it would be good to know in case it pops up later.

Thank you again, @Priyanka !

7

I am glad that it worked for you. The Link Resolver is configured by creating a ~/app/prismic/link-resolver.js file in your Nuxt app. Here you can find more details.

Thanks,
Priyanka

1 Like