Not playing nice with `router.extendRoutes`

[hacknug]

Some projects will fetch data from an external source and use router.extendRoutes to create pages based on the source's response contents. In my case I fetch the data from Sanity and, given a _type and slug, I'll generate a page using one of my ignored page components.

Before adding @nuxtjs/i18n to my project, I was able to pass an array of route objects and Nuxt was using to create the pages I wanted. With this module enabled, Nuxt will try to render all of those pages for each of the available locales.

This is what doesn't work as expected (plus I couldn't find any examples of using the module like this). I have a PR ready for review (#1281) that is solving this issue on my local env. Since I'm not familiar with the codebase and all the ins and outs of the module I'm opening this issue first.

Version

@nuxtjs/i18n: v7.0.3 nuxt: v2.15.8

Nuxt configuration

• [x] Applies to a site deployed to a static server (site generated with nuxt generate)
• [ ] Applies to a site deployed to a server with a Node backend

@nuxtjs/i18n configuration

// nuxt.config.js

const mapPages = ([key, { component, result }]) => ([key, { component: join(__dirname, component), result }])
const pages = { // on my codebase this is a groq query to Sanity
  "legal": {
    "component": "./pages/-legal.vue",
    "result": [
      {
        "_id": "unique-id-value-for-the-document",
        "lang": "en",
        "slug": "cookies-policy"
      },
      {
        "_id": "i18n.unique-id-value-for-the-document.es",
        "lang": "es",
        "slug": "politica-cookies"
      }
    ]
  }
}

const dynamicPages = Object.fromEntries(Object.entries(pages).map(mapPages))

export default {
  buildModules: [
    ['@nuxtjs/i18n', {
      locales: ['en', 'es'],
      defaultLocale: 'en',
      detectBrowserLanguage: false,
      vueI18n: {
        fallbackLocale: 'en',
        messages: {
          en: { welcome: 'Welcome' },
          es: { welcome: 'Bienvenido' },
        },
      },
    }],
  ],

  router: {
    extendRoutes (routes) {
      const buildRoutes = ([key, { result, component }]) => result.map(({ lang, slug, _id }) => {
        const name = _id.includes('i18n.') ? result.find((i) => i._id === _id.split('.')[1]).slug : slug
        const route = _id.includes('i18n.') ? `/${lang}/${slug}` : `/${slug}`
        return { name: `${name}___${lang}`, path: route, component, chunkName: `pages/${key}`, url: route }
      })

      return sortRoutes([
        ...routes,
        ...Object.entries(dynamicPages).map(buildRoutes).flat(),
      ])
    },
  },
}

• Dont' mind the unnecessary Object.entries(Object.fromEntries()), my config is split in two parts and one of them is shared accross different projects and I just copy/pasted the relevant parts for the issue.

Reproduction Link

https://codesandbox.io/s/test-nuxt-i18n-forked-2us3p

Steps to reproduce

1. Open the reproduction link
2. Open the browser URL from CodeSandbox on a new tab
3. Open the routes section inside vue-devtools, you should se something like this:

What is Expected?

I expect @nuxtjs/i18n to either:

• allow me to pass an array of valid routes without messing with them
• handle everything automagically for me (this might be hard to implement and would require users to provide those routes with everything the module could need to make it work)

What is actually happening?

The module is assuming each of those routes needs their localized counter parts and pushing them to the router. This breaks the theme-switcher functionality and pushes non-existent pages to the router, resulting in one build error for each of those.

It also prefixes the paths with each locale, resulting in some cases in a duplicated locale. Looks like this only happens because the module doesn't expect someone to provide custom routes.

---

I tried with different name routes, including/excluding the locale on the name route, and a bunch of other things. The approach shown on the config section of this issue is what made the most sense to me since it consist of manually writing the same route Nuxt and the module would generate for me.

[rchl]

Without investigating too much, maybe it would work for you to set the pages option (https://i18n.nuxtjs.org/options-reference#pages) based on the API response instead?

[hacknug]

Without investigating too much, maybe it would work for you to set the pages option (i18n.nuxtjs.org/options-reference#pages) based on the API response instead?

Yeah, that's what I'm using for most pages. I forgot to add some details to justify my setup.

I'm using ignored pages (four different kinds) to generate pages at the root level. They're landings the marketing team uses to onboard new users and I have no way to know where they'll go except at build time when I fetch them from the CMS.

Let me know if this makes it clearer or you have any more questions. I can provide more details if that's the case 👍

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hacknug]

not stale

[emielmolenaar]

Same issue here, we are using _.vue to fetch pages from an API based on the page path. Together with the prefix_anddefault strategy and without a default locale, the route to .vue is gone. Manually defining that route via extendRoutes isn't working.

[nepster-web]

is there any progress on this issue?

[smg99]

Same issue here, we are using _.vue to fetch pages from an API based on the page path. Together with the prefix_anddefault strategy and without a default locale, the route to .vue is gone. Manually defining that route via extendRoutes isn't working.

+1

[Fillsen]

Same issue

[zhouyupeng]

try to use hooks like so:

 hooks: {
    "build:extendRoutes": (routes, resolve) => {
      routes.push({
        name: "RouterName",
        path: "/path",
        component: resolve(__dirname, "components/components.vue")
      });
    }
  },