search

nuxt / nuxt

The Intuitive Vue Framework.
https://nuxt.com
MIT License
54.9k stars 5.02k forks source link

warning about 'Calling 'useRoute' within middleware may lead to misleading results' when it is in the '<script setup>' of the SFC component #28893

Open n0099 opened 2 months ago

n0099 commented 2 months ago

Environment

Reproduction

git clone https://github.com/n0099/open-tbm && cd open-tbm
git checkout e7c516a2ac5bad2e726074fe9155c9b93c940df0
cd fe
yarn
cat <<'ENV' > .env
NUXT_APP_BASE_URL=/tbm
NUXT_SITE_URL=https://localhost
NUXT_PUBLIC_BE_URL=https://n0099.net/tbm/be
ENV
yarn dev

access https://localhost/tbm/posts/fid/228500/cursor/vNcpHQI,bLKIZg,lMJmGCM,mKqzZg,W3eEFSM,kuKoZg in browser and open devtools scroll to the bottom of page and click the button with text 下一页 you can see many console.warn() with callstack at https://github.com/n0099/open-tbm/blob/e7c516a2ac5bad2e726074fe9155c9b93c940df0/fe/src/components/post/badge/Common.vue#L49 image

Describe the bug

https://github.com/nuxt/nuxt/blob/d5cf409ddca078266bd71ca011b9bc6ed6e58e05/packages/nuxt/src/app/composables/router.ts#L21-L22 https://github.com/nuxt/nuxt/blob/d5cf409ddca078266bd71ca011b9bc6ed6e58e05/packages/nuxt/src/app/composables/router.ts#L81-L84 https://github.com/nuxt/nuxt/blob/d5cf409ddca078266bd71ca011b9bc6ed6e58e05/packages/nuxt/src/pages/runtime/plugins/router.ts#L193 https://github.com/nuxt/nuxt/blob/d5cf409ddca078266bd71ca011b9bc6ed6e58e05/packages/nuxt/src/app/plugins/router.ts#L245

Additional context

No response

Logs

No response

github-actions[bot] commented 2 months ago

Stackblitz link for the reproduction: Stackblitz

danielroe commented 2 months ago

Looks like a complex app. Would you be able to provide a minimal reproduction? 🙏

github-actions[bot] commented 2 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 prioritize 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: 👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz 👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox 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/minimal-reproducible-example)
n0099 commented 2 months ago

scroll to the bottom of page and click the button with text 下一页

In fact this step should be repeated two times, the first time to click that button won't trigger this.

I fixed this by changing the inline-function style v-on event handler on that button which wrapping an async function with plain method or inline handler:

-@clickNextPage="async () => await fetchNextPage()"
+@clickNextPage="fetchNextPage()"
+@clickNextPage="fetchNextPage"
n0099 commented 2 months ago

I fixed this by changing...

It's still reproducible :(

danielroe commented 2 months ago

You should not call use useRoute in a click handler. Call it in your setup function and use the route object in the click handler

n0099 commented 2 months ago

useRoute in a click handler

I'm not. https://github.com/n0099/open-tbm/blob/e7c516a2ac5bad2e726074fe9155c9b93c940df0/fe/src/components/post/badge/Common.vue#L49 It's in a <script setup> of SFC.

danielroe commented 2 months ago

(Just mentioned in case. I'm still waiting for a minimal reproduction to check in more detail.)

n0099 commented 2 months ago

~It seems that prevent re-render <NuxtPage> when changing route can fix this even with @clickNextPage="async () => await fetchNextPage()"~

-    <NuxtPage />
+    <NuxtPage :pageKey="route => route.path.split('/')[1]" />

No it's still reproducible. About minimal reprod: I tried to make one: https://codesandbox.io/p/devbox/new-water-vxj48t but it won't reproduce.

nightlyworker commented 1 month ago

Report from the field: Nuxt 3.13.1 with Nitro 2.9.7

Nuxt Ui UCommandPalette with @update:model-value="onSelect"

function onSelect (option) { router.push({ path: option.id }) }

Calling useRoute within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes.

n0099 commented 1 month ago

@nightlyworker Is it possible for you to extract a minimal reprod of your case? I've already tried this but failed.

nightlyworker commented 1 month ago

I will try tomorrow with stackblitz nuxt UI template TIL. I'm not familiar with it.

Here is the gist:


<template>
    <UCommandPalette
    ref="commandPaletteRef"
    :groups="groups"
    icon=""
    :ui="ui"
    :autoselect="false"
    @update:model-value="onSelect"
  >
    </UCommandPalette>
</template>
<script setup>
const router = useRouter()
...
function onSelect (option) {
  console.log('onSelect')
  if (option.id) {
    state.isSearchOpen = false
    console.log(state)
    router.push({ path: option.id })
  }
</script>

This component is ClientOnly Clicking on the result will call onSelect which makes router.push will raise the warning.

For reference: https://ui.nuxt.com/components/command-palette