Merge request list throws No match for router error under Vue 3 when filtering or sorting

Summary

Under Vue 3 (@vue/compat), the merge request list page throws Uncaught Error: No match for when the user applies a filter or changes the sort order. The error appears only in the rspec system pg17 vue3 CI jobs, never in the Vue 2 jobs of the same pipeline.

vue-router 4 (@gitlab/vue-router-vue3 4.5.1) throws this error in its route matcher when a location resolves to no route record. vue-router 3.6.5, used under Vue 2, does not throw in that case.

The affected specs pass on master today only because the browser console is not checked for passing examples. The reveal merge request !255199 surfaced them.

Where it fails

Feature specs, all under spec/features/merge_requests/ unless noted:

  • user_sorts_merge_requests_spec.rb
  • user_filters_by_labels_spec.rb
  • user_filters_by_deployments_spec.rb
  • user_filters_by_target_branch_spec.rb
  • user_filters_by_multiple_criteria_spec.rb
  • user_filters_by_author_spec.rb
  • user_filters_by_assignees_spec.rb
  • user_filters_by_approvals_spec.rb
  • user_filters_by_milestones_spec.rb
  • user_filters_by_source_branch_spec.rb
  • filters_generic_behavior_spec.rb
  • user_sees_nav_buttons_spec.rb
  • spec/features/dashboard/merge_requests_spec.rb
  • Group merge requests page: Group merge requests page group filtered search shows the navbar with no results

Error

Chrome truncates the error object. It shows a router location with a query (sort, state) and an href that ends in /-/merge_requests/:

Uncaught Error: No match for {"query":{"sort":"created_date","sta…"href":"/namespace2/project-2/-/merge_requests/"}

Thrown from node_modules/@gitlab/vue-router-vue3/dist/vue-router.mjs line 940.

The router is created in app/assets/javascripts/merge_requests/list/index.js lines 72-76:

router: new VueRouter({
  base: window.location.pathname,
  mode: 'history',
  routes: [{ path: '/' }],
}),

Hypothesis

The filtered search or sort handler calls router.push or router.replace with a location whose path, or whose href with a trailing slash, does not match the single / route, or with a location object shape that vue-router 4 resolves differently from vue-router 3. vue-router 3 tolerated the unmatched location. vue-router 4 throws. This needs confirmation by reproducing with the Vue 3 migration enabled for the merge request list page, or in Jest with VUE_VERSION=3.

Verification

  1. Create the vue3_migration.yml for the merge request list entrypoint and its feature flag, as in !252389 (merged). Enable the flag.
  2. Open a project's merge request list.
  3. Apply a filter, for example author. Change the sort order.
  4. Confirm that the browser console shows no No match for error.
  5. Run the listed feature specs in a rspec system pg17 vue3 job with !255199 applied. Expect them to pass.

References