question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Since 8.24.3: nuxt validate() method getting wrong route injected on language switch

See original GitHub issue

Reporting a bug? I am using nuxt to build a static generated site. For internationalization I am using nuxt-i18n which has vue-i18n as dependency.

A few days ago, I updated some packages and suddenly when switching languages using nuxt-i18n switchLocalePath() function some routes where giving errors. These were due to the nuxt hook validate() of the loaded page component somehow getting the nuxt context with the old route injected, not the new one as before.

E.g. coming from myhost.com/ueber-uns and switching locale to myhost.com/en/about-us, the page component checks using the validate() function if the page route is valid, and if not instantly loads an error page:

pages/_mainPage/index.vue (Page component):

async validate({ route, app, params, store, isStatic }) {
   console.log("pages/_mainPage/index.vue, validate()")

   console.log("i18n Locale: " + app.i18n.locale) // will output the current i18n locale, which is correct
   console.log("Validated route: ")
   console.log(route) // will output the old route (ueber-uns) not the new route (en/about-us)

   // The following will check if the routes params can be found in vuex page store for the current language
   // which will always fail because the is no `ueber-uns` slug in the store for locale `en`
   const page = store.getters["wpapi/pages/getBySlug"](
     params.mainPage,
     app.i18n.locale
   ) 

   return page != null
 },

I narrowed the cause down and it seems that since vue-i18n@8.24.3 this issue appears. The versions before work fine. Therefore I thought I post it here as a bug report although it is closely related to nuxt and nuxt-i18n (-> validate() function).

If you think this issue has to be solved by nuxt-i18n or nuxt, I apologize for wrongly raising the issue here.

Module versions (please complete the following information):

  • vue: 2.6.12
  • nuxt: 2.15.2
  • vue-i18n: 8.24.3
  • nuxt-i18n: 6.20.4

Reproduction Link

https://codesandbox.io/s/vue-i18nvalidate-0mp02?file=/yarn.lock:331244-331252

If you use it with vue-i18n v8.24.2 and load the page and click on “Switch to en” you will get the route {name: "index___en",... output from validate via console.log .

Try changing the vue-i18n version to v8.24.3 wait for build and reload the page, then click on “Switch to en” you will get the route {name:"index___de",... output from validate via console.log .

Expected behavior

When switching locales the validate() method should get the route navigated to (not from) injected via the nuxt context.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
kazuponcommented, Jun 19, 2021

I’ve just fixed and release v8.24.5 Please check it!

0reactions
lagsetcommented, Jun 21, 2021

I’ve just updated nuxt-i18n and vue-i18n to the most recent version in my project and it works. Thanks for dealing with this issue!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bountysource
Since 8.24.3 : nuxt validate() method getting wrong route injected on language switch.
Read more >
The validate Method - Nuxt
This method takes the context object as an argument. Nuxt lets you define a validator method inside your dynamic route component (In this...
Read more >
Nuxt JS route validation doesn't redirect to error page
I looked on the documentation, and it seems like the user should be automatically redirected to an error page, however nothing happens here....
Read more >
Connect i18n and vee-validate. Nuxt validation and ... - Medium
I have used both of them but a little ago I have needed to use them together as -translated validations and localization. After...
Read more >
vue-i18n - bytemeta
Since 8.24.3 : nuxt validate() method getting wrong route injected on language switch. Braklord ... Memory leak caused by component switching · Previous...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found