ember.js: Redirecting a transition to same route with different query params does not work unless transition is aborted before

I have what appears to be an additional variant of this, available in this repo.

If you try to do a transitionTo or replaceWith in a route’s afterModel, and it’s a query-params-only transition, and it’s the first time entering the application (i.e. first render), it will fail with exactly the error @jelhan reported above. Moreover, transition.abort() does not fix things in this case; it just leaves you with a dead app. 😬

To see the reproduction behavior and how it varies for later entries, comment out these lines: later transitions work fine; only the first transition into the route fails this way. To see that transition.abort() only further hoses things in this case, comment those lines back out and uncomment this line.

@acorncom I’m quite sure that I had reproduced it using the latest version of Ember at the same day when reporting. So I think it was 3.14.1. But I was also able to reproduce it with latest ember-source available today, which is 3.16.0.

I created a repository with the reproduction mentioned above: https://github.com/jelhan/ember-demo-redirect-to-same-route-with-different-query-params

Here are the steps to reproduce both issues mentioned above using that repo. Assuming that you have cloned it, installed dependencies and run ember serve.

1. transition to route triggering the redirect from another route

• Open http://localhost:4200
• Click on the link

Expected:

• URL should be http://localhost:4200/foo?bar=1
• currentURL property of RouterService should be /foo?bar=1
• currentRoute.queryParams should deep equal { bar: 1 }

Actual:

• URL is http://localhost:4200/foo (missing query param)
• currentURL property of RouterService is /foo (missing query param)
• currentRoute.queryParams deep equals { bar: 1 } (correct but out of sync with URL)

2. open that route directly

• Open http://localhost:4200/foo

See an error been thrown and nothing rendered. The error is:

TypeError: routeInfos[(routeInfoLength - 1)] is undefined

It’s caused by routeInfos of transition being an empty array here: https://github.com/emberjs/ember.js/blob/v3.14.1/packages/%40ember/-internals/routing/lib/system/route.ts#L2523 _queryParamsFor can’t handle that case and throws at this line: https://github.com/emberjs/ember.js/blob/v3.14.1/packages/%40ember/-internals/routing/lib/system/router.ts#L926

Fixing the error by aborting the transition

To reproduce that aborting the transition before doing the redirect fixes both issues uncomment these line: https://github.com/jelhan/ember-demo-redirect-to-same-route-with-different-query-params/blob/1326804684273b9369725099f36f262fabdd9832/app/routes/foo.js#L6-L7

Just encountered this on Ember 4.12. 😞 @buschtoens fix in tildeio/router.js#307 does seem to fix it for me, though. Pretty amazed this has gone so long without being addressed since it seems like a common scenario.

Anyone know of any workarounds or any way this could be monkey-patched?

We’re still seeing this issue in Ember.js 5.1.

If we’re replacing a route with the same route but different query params:

export default class PortfolioRoute extends Route {
    beforeModel() {
        this.router.replaceWith('portfolio', {
          queryParams: {
            bla: 'bla'
          }
      });
    }
}

the route crashes on first render with:

router.js:836 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
    at Router._queryParamsFor (router.js:836:1)
    at ApplicationRoute.finalizeQueryParamChange (route.js:1242:1)
    at Router.triggerEvent (router.js:1219:1)
    at PrivateRouter.triggerEvent (router.js:234:1)
    at PrivateRouter.finalizeQueryParamChange (router_js.js:1703:1)
    at PrivateRouter.queryParamsTransition (router_js.js:1257:1)
    at PrivateRouter.getTransitionByIntent (router_js.js:1317:1)
    at PrivateRouter.transitionByIntent (router_js.js:1275:1)
    at PrivateRouter.doTransition (router_js.js:1399:1)
    at PrivateRouter.transitionTo (router_js.js:1809:1)

Unfortunately none of the workarounds seem to work. Any suggestions on getting around the bug?

Same problem as @chriskrycho with ember 3.22.

Also cannot use transition.abort() because it breaks the app when it’s a first render.

@rreckonerr If I got it right you suspect that the bug was introduced by https://github.com/tildeio/router.js/commit/f385d1162ab3307c166bf5b6b19eef45345dd8d0. It was released in router_js@5.0.0.

Ember.js upgraded to router_js@^5 here: https://github.com/emberjs/ember.js/pull/17007

ember-source@3.6.0 is the first stable release containing this version: https://github.com/emberjs/ember.js/blob/a5f870fd309e5008667b3ca2bf569721ac3c2f96/package.json#L149 The stable release before ember-source@3.5.1 as using router_js@2.0.0-beta.4: https://github.com/emberjs/ember.js/blob/abf753a3d494830dc9e95b1337b3654b671b11be/package.json#L139

Will try to find some time to verify that the bug is reproducible with ember-source@3.6.0 but not with ember-source@3.5.1. The ember-source@3.6.0 contains many router related changes. But at least it would help to trace down the bug to that big router refactoring.