Ember.js: transitionTo queryParams on initial render still broken

[zidjian257]

The problem described in #12169 still exists, so I'm filing a new ticket, as the initial ticket is already closed.

[zidjian257]

the only aproach to get around this in ember 2.10 for me was the solution posted by @taras on 23 Dec 2015 in #12169 (the other solutions mentioned didn't work):

let RedirectAfterDidTransition = Ember.Mixin.create({
  redirectAfterDidTransition(...args) {
    this.router.one('didTransition', ()=>{
      this.router.transitionTo(...args);
    });
  }
});

export default Route.extend(RedirectAfterDidTransition, {
  afterModel() {
    this.redirectAfterDidTransition('index');
  }
});

[Serabe]

Updated jsbin to Ember 2.11.
Updated to 2.12 beta 1 and seems fixed can you provide a test that breaks under 2.11 but is fixed in 2.12 to make sure we don't have a regression?

Thank you!

[rafaelbnp]

+1 on this. Having same issue!

[GCheung55]

Seeing this on 2.10.2. Here's the stacktrace:

TypeError: Cannot read property 'name' of undefined
    at Class._queryParamsFor (vendor.js:47541)
    at Class.finalizeQueryParamChange (vendor.js:45361)
    at Router.triggerEvent (vendor.js:47954)
    at trigger (vendor.js:75664)
    at finalizeQueryParamChange (vendor.js:77652)
    at Router.queryParamsTransition (vendor.js:76999)
    at Router.getTransitionByIntent (vendor.js:76908)
    at Router.transitionByIntent (vendor.js:77017)
    at doTransition (vendor.js:77619)
    at Router.transitionTo (vendor.js:77093)

[kbullaughey]

I'm seeing this on 2.13.

[akaravashkin]

+1 on 2.13.3

[jemware]

I’m seeing this in 2.14.0

[gschulze]

Running into the same issue on 2.15.0.

[divmgl]

Ember 2.16.2 still has this issue

[gschulze]

So this still happens on 2.18.0. Really?

[bretjb]

@gschulze I am seeing this on 2.18.

[alvinvogelzang]

I'm still experiencing this issue as well in Ember 2.18

[pixelhandler]

@GCheung55 @akaravashkin @alvinvogelzang @bretjb @divmgl @gschulze @jemware @kbullaughey @locks @rafael-paiva @zidjian257 Just curious is this still an issue in Ember 3?

[rafaelbnp]

@pixelhandler I'm still on the LTS 2.18.2 and I don't have the time now to check Ember 3... sorry

[pixelhandler]

@rafael-paiva thanks for the update :)

[ohcibi]

I'm seeing this on 3.4.1 but I cannot reproduce it in a twiddle. I get the very same stacktrace mentioned above and I found that in the line the exception is thrown, the problem is that that .name property is tried to get from on object out of an empty array. I'd say there has to be a check if that array is empty which throws a better error message. I created #17118 to address this specifically.

[teakap]

I am using 2.18.2 and had the same error. Canceling the transition from the transition object did the trick for me. My use case was handling a 401 on the error hook.

error: function (error, transition) {

  if (error.status === '401') {
    // Do other stuff ex. localStorage.clear();
    transition.abort();
    this.transitionTo('index', {
       queryParams: {
           showLogin: true
       }
     });

    return true;
  }
}

[patrickberkeley]

Here's a twiddle that shows this issue: https://ember-twiddle.com/7515eb58d0e64666b27bcb9fe9b3adfc/faba6dcc7af61662e0b201b3833571a155cd90d0?openFiles=routes.application.js%2C&route=%2F%3Fsome%3Dthing

(Also posted to #17118)

[ming-codes]

I'm seeing this in 3.10 😕

[JackEllis]

Duplicate of #17118 I believe.

Ran into this issue and it didn't play nicely with next(function()) because it meant that components would render before the new tansition.

Solution that worked for me:

import Route from '@ember/routing/route';
import { run } from '@ember/runloop';

export default Route.extend({
    queryParams: {
        site: {
            refreshModel: true,
            replace: true
        }
    },

    beforeModel(transition) {
        if (isEmpty(transition.queryParams.site)) {
            run(this, function() {
                this.replaceWith({ queryParams: {
                    site: 1,
                }});
            });
        }
    },

    model(params) {}
});

So using 'run' instead of 'next' brought it in ahead of the component rendering etc. I noticed this because I was seeing extra XHR requests firing off before we had a valid site ID

[lolmaus]

@JackEllis Why not return this.replaceWith() without run/next? And maybe transition.abort(), not sure.

[JackEllis]

@lolmaus Because it doesn't work without run / next. If I return it without the run / next we get the error this thread is about

[lvegerano]

This is happening in 3.12

[arthur5005]

And 3.13
This might be a superficial assessment, but this method in router class seems to allow for unsafe access:
https://github.com/emberjs/ember.js/blob/5c214717b07621f5f052ac56d358db74cc368723/packages/%40ember/-internals/routing/lib/system/router.ts#L924-L930

What's happening is routeInfos collection is coming in empty, which I imagine is a problem in and of it self (I don't know enough about the internals to comment), but if we changed these two lines to allow for safe access, at least an exception wouldn't be thrown in the the case where routeInfos is an empty array.

https://github.com/emberjs/ember.js/blob/5c214717b07621f5f052ac56d358db74cc368723/packages/%40ember/-internals/routing/lib/system/router.ts#L926-L927

[ohcibi]

@JackEllis I created #17118 as I debugged this error up to the point @arthur5005 showed (let leafRouteName = routeInfos[routeInfoLength - 1].name) and also concluded that the problem is thatrouteInfos` is empty. I think this error is way to obvious that it got overlooked and was expecting this to cause errors in other situations as well but since I found nothing, I created the other issue to gain more knowledge about that code; why it is written that way and if a fix could be as simple as catching the obvious empty array exception like @arthur5005 suggested.

This was one year ago and I haven't even got a response that confirms wether or not that piece of code is written badly by accident or if there is a reasoning behind it.

git blame mentions @chadhietala as the author of those two lines. Maybe he has some insights to it? Also @rwjblue was commenting on my issue but hasn't commented on the replies to his comments since. I'm unsure if the core team is even aware of this pretty obvious issue.

[frinyvonnick]

Hi, I ran into this same issue and fixed it using redirect instead of beforeModel. Hope it will help someone 👍

[elgordino]

This is still occurring in ember 3.17.

[brokenalarms]

using redirect causes the same issue for me in 3.12 unfortunately.

[arthur5005]

Ran into this issue again on 3.20.4 Can anyone with expertise comment on my assessment? Happy to help with some direction.

[buschtoens]

Can y'all check whether this fixes your issue? 😊
https://github.com/tildeio/router.js/pull/307