search

nuxt-modules / i18n

I18n module for Nuxt
https://i18n.nuxtjs.org
MIT License
1.75k stars 483 forks source link

[8.0.1] Route params not resolved in (async) middleware #2756

Closed darthf1 closed 8 months ago

darthf1 commented 9 months ago

Environment

Reproduction

-

Describe the bug

When I upgrade from 8.0.0 to 8.0.1, the parameter values in the to parameter in the defineNuxtRouteMiddleware are not resolved.

When I put a console.error(to) in an (async) middleware, I get:

import { defineNuxtRouteMiddleware } from '#app'

export default defineNuxtRouteMiddleware(async (to) => {
  console.error(to)
})

8.0.1:

{
  "fullPath": "/:organisationId/:organisationSlug/:engagementId/:engagementSlug/grootboek/overzicht",
  "hash": "",
  "query": {},
  "name": "generalLedger-Overview___nl",
  "path": "/:organisationId/:organisationSlug/:engagementId/:engagementSlug/grootboek/overzicht",
  "params": {},
  "matched": [
    {
      "path": "/\\:organisationId/\\:organisationSlug/\\:engagementId/\\:engagementSlug/grootboek/overzicht",
      "name": "generalLedger-Overview___nl",
      "meta": {
        "middleware": [
          "organisation",
          "engagement",
          "general-ledger"
        ]
      },
      "props": {
        "default": false
      },
      "children": [],
      "instances": {},
      "leaveGuards": {},
      "updateGuards": {},
      "enterCallbacks": {},
      "components": {}
    }
  ],
  "redirectedFrom": {
    "fullPath": "/",
    "hash": "",
    "query": {},
    "name": "Index___nl",
    "path": "/",
    "params": {},
    "matched": [
      {
        "path": "/",
        "name": "Index___nl",
        "meta": {
          "middleware": "landing"
        },
        "props": {
          "default": false
        },
        "children": [],
        "instances": {},
        "leaveGuards": {},
        "updateGuards": {},
        "enterCallbacks": {},
        "components": {}
      }
    ],
    "href": "/"
  },
  "href": "/:organisationId/:organisationSlug/:engagementId/:engagementSlug/grootboek/overzicht"
}

8.0.0:

{
  "fullPath": "/7u6I08EcDJ26pZFTApHWQm/something/7soJtH3gywXoEtGRSUOFFT/vb/grootboek/overzicht",
  "hash": "",
  "query": {},
  "name": "generalLedger-Overview___nl",
  "path": "/7u6I08EcDJ26pZFTApHWQm/something/7soJtH3gywXoEtGRSUOFFT/vb/grootboek/overzicht",
  "params": {
    "organisationId": "7u6I08EcDJ26pZFTApHWQm",
    "organisationSlug": "something",
    "engagementId": "7soJtH3gywXoEtGRSUOFFT",
    "engagementSlug": "vb"
  },
  "matched": [
    {
      "path": "/:organisationId/:organisationSlug/:engagementId/:engagementSlug/grootboek/overzicht",
      "name": "generalLedger-Overview___nl",
      "meta": {
        "middleware": [
          "organisation",
          "engagement",
          "general-ledger"
        ]
      },
      "props": {
        "default": false
      },
      "children": [],
      "instances": {},
      "leaveGuards": {},
      "updateGuards": {},
      "enterCallbacks": {},
      "components": {
        "default": {
          "__hmrId": "20b7b988",
          "__file": "/home/node/app/src/UserInterface/GeneralLedger/pages/generalLedger/Overview.vue"
        }
      }
    }
  ],
  "href": "/7u6I08EcDJ26pZFTApHWQm/something/7soJtH3gywXoEtGRSUOFFT/vb/grootboek/overzicht"
}

Additional context

No response

Logs

No response

github-actions[bot] commented 9 months ago

Would you be able to provide a reproduction? 🙏

More info ### Why do I need to provide a reproduction? Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. ### What will happen? If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect. If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. ### How can I create a reproduction? We have a couple of templates for starting with a minimal reproduction: 👉 [Reproduction starter (v8 and higher)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/v8) 👉 [Reproduction starter (edge)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/edge) A public GitHub repository is also perfect. 👌 Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)
BobbieGoede commented 8 months ago

Closing this due to inactivity and lack of reproduction, if you're still experiencing this issue please open a new issue with a (minimal) reproduction.

darthf1 commented 8 months ago

Hi @BobbieGoede, apologies for not providing one sooner:

https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-gzk2eb?file=middleware%2Ftest.ts

From the index, if you follow the URL to the test page you will see an error with the to object. You can see theres a difference between 8.0.0 and 8.0.1.

If the navigation does nothing, remove the throw new Error from the middleware, and add it back after you navigated.

BobbieGoede commented 8 months ago

@darthf1 Thanks for the reproduction!

It's interesting that this worked in 8.0.0, is there a specific reason why you're using test.vue as opposed to test/[id].vue? I have made some changes to your reproduction to make things work (I assume) as expected here.

The things I changed:

If you have any questions let me know!

darthf1 commented 8 months ago

@darthf1 Thanks for the reproduction!

It's interesting that this worked in 8.0.0, is there a specific reason why you're using test.vue as opposed to test/[id].vue? I have made some changes to your reproduction to make things work (I assume) as expected here.

The things I changed:

* pages structure

  * `name` in `localePath` to match

* `paths` syntax in `defineI18nRoute`

If you have any questions let me know!

Ah, thanks for looking into it!

No there's no specific reason, other than this is a big app which originated in Vue 2/Nuxt 2, so it was a quite a painful migration to Vue 3/Nuxt 3. And since this worked I never looked any further/ deeper.

Thank you for providing a fixed reproduction. Reading the docs I guess this is the more Vue/Nuxt preferred way of dealing with these kind of routes?

Is it possible to "restore" the behavior as it was in 8.0.0? Making the changes you have but in my app is going to take significant effort, so just looking for options :)

BobbieGoede commented 8 months ago

Actually after looking into it some more, it seems like just changing the paths syntax in defineI18nRoute is sufficient see this reproduction.

This was probably caused by #2711, which actually fixes the route segment parsing to be the same as that of Nuxt. I don't think providing parameters only in defineI18nRoute is documented behaviour, and this may cause unexpected behaviour down the road with other Nuxt functionalities, or break in future releases.

Hope this helps!