I18n-module: Duplicate route names with prefix_and_default strategy

[rchl]

Version

v5.3.0

Reproduction link

https://codesandbox.io/s/ql7wx2mvk6

Steps to reproduce

1. Configure nuxt-i18n module with these settings:

    [
      "nuxt-i18n",
      {
        locales: [
          { code: "pt", iso: "pt-PT", file: "pt.json" },
          { code: "us", iso: "en-US", file: "en.json" }
        ],
        langDir: "locales/",
        lazy: true,
        strategy: "prefix_and_default",
        defaultLocale: "us"
      }
    ]

1. Load the root path.
2. Look at the console (the server one, at the bottom of the codesandbox UI)

What is expected ?

No warnings about duplicated routes.

What is actually happening?

Getting console warnings:

[vue-router] Duplicate named routes definition: { name: "about___us", path: "/us/about" } 
[vue-router] Duplicate named routes definition: { name: "index___us", path: "/us" }

Additional comments?

Appears to be due to using strategy: "prefix_and_default", setting which creates routes with duplicate names for default locale.

_{This bug report is available on Nuxt community (#c153)}

[timAtStrathcom]

Just ran into this as well and it's super annoying because it generates this console message for _every single route_ in the app on every single page hit. With lots of routes this is huge amount of log spam.

[Seranth]

For those that encounter this problem, you can fork the project as per the instructions in the README.md file for the project, then change line 94 in src/helpers/routes.js from routes.push({ ...localizedRoute, path }) to localizedRoute.alias = path in order to change the behavior from adding a duplicate route to simply creating an alias to the route.

Just be aware of that this will also make it so that using localePath for routing will result in users being redirected to e.g. /en/contact instead of /contact for the default language as well. /contact would be a valid and functioning route, it's just that localePath doesn't work as you might expect. I'm looking into this currently since the behavior I want is for people on /en/contact should be routed to /en/other/route, and /contact should be routed to /other/route.

[Seranth]

Another alternative to the above solution is to use routes.push({ ...route, path }) instead of routes.push({ ...localizedRoute, path }). This will still create a new route for the default route (which you might want for e.g. SEO purposes) but its name will be set to the base name of the route. For example, a contact route is currently generated into e.g. contact___en, but with this change the default locales routes name would just be contact.

Note that localePath will still move you to e.g. /en/contact from /contact, I still need to find a solution to that.

[odanado]

Sorry, I added a strategy of prefix_and_default . (#111)
I think how to solve this problem.

[ruzpuz]

I am experiencing this issue as well... any way around it?