Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

bug: vue swipe cancellation throws when the previous page is missing

オープン 初心者向け
  • 何か問題がありますか？
#31,514 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@dandoingdev がすでに取り組んでいます。

2026年10月1日 から。

  • #31515 @dandoingdev による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript, typescript
領域
frontend, mobile-dev

調査の方向性

Ionic Vue IonRouterOutlet のキャンセル分岐である swipeHandler.onEnd(false) から始め、特に findViewItemByRouteInfo を通じた検索を確認してください。npm install と npm run dev でスタンドアロンの再現手順を実行し、その後、ビューが見つからない場合、アンマウントされたページ、通常のキャンセル、完了したスワイプ、遅れて発生するキャンセルについて説明されているリグレッションのカバレッジを確認してください。以前にマウントされたページがなくてもキャンセルが安全に行われ、既存のクリーンアップと完了したスワイプが引き続き機能すれば完了です。

索引モデルが issue の本文から書いたものです。

説明

triage
Prerequisites
  • I have read the contributing guidelines and code of conduct.
  • I have searched existing issues for this problem.
Ionic Framework Version

v9.x

Current Behavior

Ionic Vue's IonRouterOutlet cancellation branch (swipeHandler.onEnd(false)) unconditionally dereferences the view returned by findViewItemByRouteInfo and its ionPageElement.

If the callback runs after navigation has returned to a root route, there may be no previous view in that outlet. The callback throws:

TypeError: Cannot read properties of undefined (reading 'ionPageElement')

The same branch also throws if a view record exists but its page has been unmounted. This was observed in an iOS app using 9.0.3, with the stack pointing to the cancelled-animation callback in the core router outlet. The unguarded code is still present on main at 643584b3ac2ba1ca263cbf53960ccde3be2a96fc (9.0.6).

Expected Behavior

Cancellation should safely do nothing if there is no previous mounted page to hide. When the page exists, cancellation should continue setting aria-hidden="true" and ion-page-hidden. Completed swipes should continue navigating back.

Steps to Reproduce
  1. Download the four files in the reproduction gist into one directory.
  2. Run npm install and npm run dev with a supported Node version.
  3. Open the displayed local URL and click Reproduce.
  4. Observe the TypeError in the page and console.

The reproduction uses the real Ionic Vue router and outlet. It pushes a second page, checks canStart(), returns to the first page, then explicitly delivers onEnd(false) to model a late cancellation callback. This is a deterministic callback-level reproduction, not a claim to reproduce the physical touch/animation race. There are no mocked view stacks or routers.

Code Reproduction URL

https://gist.github.com/dandoingdev/d7a6e044bf006bdb633aa32aaeffd410

Environment

Standalone reproduction: @ionic/vue 9.0.6, @ionic/vue-router 9.0.6, Vue 3.5.42, Vue Router 5.3.1, Vite 8.3.0. Confirmed in headless Chrome on macOS. No Ionic CLI or Capacitor is needed for the deterministic reproduction.

Additional Information

I have prepared a small guard for the missing view/page and regression tests, and will link the PR here. Tests cover missing views, unmounted pages, normal cancellation cleanup, completed swipes, and late cancellation after returning to the root using the real router.

主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
2日 8時間
マージ済み PR（30日）
52

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

ionic-team/ionic-framework のほかの issue

ionic-team/ionic-framework の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。