search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.93k stars 13.52k forks source link

bug: parameterized routes do not play animations or set props on vue 3.4+ #28774

Closed lvzhenbo closed 7 months ago

lvzhenbo commented 8 months ago

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

The inability to jump is simply the original behavior of the vue-router

Expected Behavior

Should have jumped.

Steps to Reproduce

Update vue to 3.4, update @vitejs/plugin-vue to 5.0

Code Reproduction URL

https://github.com/lvzhenbo/tsdm-app/tree/652cd1de3281772d6bdd2642d37b73567918efbc

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   -
   C:\Users\29422\Desktop\tsdm-app\node_modules\.pnpm\@ionic+cli@7.2.0\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\29422\Desktop\tsdm-app\node_modules\.pnpm\@ionic+cli@7.2.0\node_modules\@ionic\cli\lib\index.js
   - C:\Users\29422\Desktop\tsdm-app\node_modules\.pnpm\@ionic+cli@7.2.0\node_modules\@ionic\cli\index.js
   - C:\Users\29422\Desktop\tsdm-app\node_modules\.pnpm\@ionic+cli@7.2.0\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 7.2.0 Ionic Framework : @ionic/vue 7.6.2

Capacitor:

Capacitor CLI : 5.6.0 @capacitor/android : 5.6.0 @capacitor/core : 5.6.0 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : not installed globally

System:

NodeJS : v20.9.0 (C:\Program Files\nodejs\node.exe) npm : 10.1.0 OS : Windows 10

Additional Information

No response

ionitron-bot[bot] commented 8 months ago

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed. In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you!

liamdebeasi commented 8 months ago

Hi there,

Can you please create a reproduction of the issue that includes only the code required to reproduce the problem?

ionitron-bot[bot] commented 8 months ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

lvzhenbo commented 8 months ago

Hi there,

Can you please create a reproduction of the issue that includes only the code required to reproduce the problem?

https://github.com/lvzhenbo/ionic-vue3.4

There are two commits here, the latest commit is the incorrect case and the penultimate commit is the correct case. Then it's a matter of clicking on the selection bar to switch routes, and you'll see some one page will refresh and the other won't

lvzhenbo commented 8 months ago

I was creating the demo and realized that it may have nothing to do with the vue version update and everything to do with the @vitejs/plugin-vue version update

Hi there, Can you please create a reproduction of the issue that includes only the code required to reproduce the problem?

lvzhenbo/ionic-vue3.4

There are two commits here, the latest commit is the incorrect case and the penultimate commit is the correct case. Then it's a matter of clicking on the selection bar to switch routes, and you'll see some one page will refresh and the other won't

liamdebeasi commented 8 months ago

Updating from Vue 3.3.13 to Vue 3.4.4 causes the issue to appear. However, I'm still able to reproduce the issue if I remove Ionic Framework from the application. Have you tried reporting this to the Vue team?

lvzhenbo commented 8 months ago

Updating from Vue 3.3.13 to Vue 3.4.4 causes the issue to appear. However, I'm still able to reproduce the issue if I remove Ionic Framework from the application. Have you tried reporting this to the Vue team?

For vue-router this anomaly is instead normal. Related documentation: https://router.vuejs.org/guide/essentials/dynamic-matching.html#Reacting-to-Params-Changes

So I'm guessing that ionic has a workaround for this situation, which is now broken due to a vue version upgrade

ih84ds commented 8 months ago

Updating from Vue 3.3.13 to Vue 3.4.4 causes the issue to appear. However, I'm still able to reproduce the issue if I remove Ionic Framework from the application. Have you tried reporting this to the Vue team?

Confirmed that downgrading my project from vue 3.4 to 3.3 resolved this issue. I was not able to find a workaround so that I could stay on 3.4.

It seems vue-router's onBeforeRouteUpdate() is firing and the to route has the correct params... but the props are not being updated with the new parameters. I'm not sure how to coerce the props into seeing the new parameters. Seems like there should be a way...

torgnywalin commented 8 months ago

We had a similar experience. When upgrading to vue 3.4.5 it started to reuse components when routing between two paths using same route with different params (user/1, user/2). Downgrading to 3.3.8 (the version we had before upgrade) solved the issue.

To me it seems like vue is following the vue-router documentation:

maelp commented 8 months ago

Interested in knowing when this will be solved. Is this a vue issue, or is this that the ionic-vue-router should be updated to conform to the new vue-router ?

liamdebeasi commented 8 months ago

Is this a vue issue, or is this that the ionic-vue-router should be updated to conform to the new vue-router ?

I'm looking into this, but I don't have a good answer at the moment other than that the expected behavior should work. My initial investigation revealed that this watch callback is not firing anymore on route changes: https://github.com/ionic-team/ionic-framework/blob/ad65824722da0eed90ef9e595b743754bfd360b8/packages/vue/src/components/IonRouterOutlet.ts#L69-L70

Doing watch(() => [route]... does not work, but watch(route... does. I need to dig a bit more into why this is the case.

If you need a resolution sooner then I recommend downgrading to Vue 3.3.x for now.

liamdebeasi commented 8 months ago

It appears this new behavior is due to a breaking change in Vue: https://github.com/vuejs/core/issues/9916#issuecomment-1872602294

The commit for this has been reverted because it was a bigger breaking change than the team expected: https://github.com/vuejs/core/issues/9965#issuecomment-1875067499

It sounds like this was already released, so maybe there's something else causing an issue too.

lvzhenbo commented 8 months ago

It appears this new behavior is due to a breaking change in Vue: vuejs/core#9916 (comment)

The commit for this has been reverted because it was a bigger breaking change than the team expected: vuejs/core#9965 (comment)

It sounds like this was already released, so maybe there's something else causing an issue too.

From the changelog, is it related to this pr (https://github.com/vuejs/core/pull/5912) ?

liamdebeasi commented 8 months ago

Yeah that looks like it is related too. I'll start looking into how we can mitigate this inside of Ionic.

liamdebeasi commented 8 months ago

Can everyone try the following dev build and let me know if the issue is resolved in their apps with Vue 3.4+?

npm install @ionic/vue@7.6.6-dev.11705526292.1bc0acb5 @ionic/vue-router@7.6.6-dev.11705526292.1bc0acb5

If you're using Vite you might need to remove node_modules/.vite before testing (this is a cache and will be re-created when you serve the app again).

lvzhenbo commented 8 months ago

https://github.com/lvzhenbo/ionic-vue3.4 Validated, jumps fine, should be solved

ih84ds commented 8 months ago

Can everyone try the following dev build and let me know if the issue is resolved in their apps with Vue 3.4+?

Confirmed. That dev build works with vue@3.4.14 for the routes I was experiencing the issue on.

maelp commented 8 months ago

Nice! Will this be released in the next ionic update?

mneciunas commented 8 months ago

Can everyone try the following dev build and let me know if the issue is resolved in their apps with Vue 3.4+?

I can confirm as well, fixed the issue for me.

liamdebeasi commented 7 months ago

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/28846, and a fix will be available in an upcoming release of Ionic Framework.

maelp commented 7 months ago

Thanks! Do you know when the release will be shipped?

liamdebeasi commented 7 months ago

The bug fix will follow our patch release schedule: https://ionicframework.com/docs/reference/versioning#release-schedule

ionitron-bot[bot] commented 6 months ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.