Ember LinkComponent falls over when hot loader included

[ianpetzer]

Hi everyone,

I’m trying to use the awesome ember-cli-hot-loader plugin and I’m running into a weird error while trying to evaluate _isActive in the LinkComponent.

As soon as I include the ember-cli-hotloader I get the following error in the console when ember tries to build the first link on the page (I can see an image and some text that it gets to before the link)

currentWhen.split is not a function TypeError: currentWhen.split is not a function at Class._isActive (http://localhost:4200/assets/app.js:32781:39)

It is actually falling over here: https://github.com/emberjs/ember.js/blob/f8ad8d9ff81cd1746339f273cb150141d75e6974/packages/ember-glimmer/lib/components/link-to.ts#L542

The value that is coming out of the qualifiedRouteName computed property is an array with a single entry in it instead of a string

which is why the code falls over when it tries to call the split function on it

This doesn’t happen with my normal app, only when I include the ember-cli-hot-loader plugin which modifies the ember-cli / brocolli behaviour to include the ember template compiler into the JS payload

[toranb]

@ianpetzer I've just shipped a new feature in v1.0.2 that should help us narrow down what component is breaking/ and why. First you'll need to narrow down from the call stack what component you have w/ link-to that is throwing that runtime error. Then exclude it w/ some configuration like you see below.

In my case the liquid-child component isn't yet compatible w/ the hot loader so I can opt out like so

  if (environment === 'development') {
    ENV['ember-cli-hot-loader'] = {
      excluded: ['liquid-unless', 'liquid-child']
    }
  }

If you are able to exclude a few components this could help us further define root cause for the issue you're having ;)

[toranb]

@ianpetzer here is an example in which I use link-to and exclude it from hot reloading

https://github.com/toranb/ember-hot-reload-demo/commit/ec19d94ec742649be44948266301340c70aa9041

[ianpetzer]

@toranb That is great! Once I set up link-to as an excluded component my app is loading successfully and reloading component changes.

The wrapping div around each component is messing with our css a bit but we can sort that out.

Thanks so much for all the help!

On Sat, Jul 7, 2018 at 5:22 PM Toran Billups notifications@github.com wrote:

@ianpetzer https://github.com/ianpetzer here is an example in which I use link-to and exclude it from hot reloading

toranb/ember-hot-reload-demo@3f9cf72 https://github.com/toranb/ember-hot-reload-demo/commit/3f9cf725f6c44af4fafa9b9964dde16edef3b788

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/toranb/ember-cli-hot-loader/issues/82#issuecomment-403223000, or mute the thread https://github.com/notifications/unsubscribe-auth/ABHZh1o6fTr9UK8w1MUHMXna7FqAZ-Wpks5uENJHgaJpZM4VD-8u .

[toranb]

@ianpetzer If you upgrade to the latest hot reloader v1.1.0 you can now opt in to the tagless configuration and it should fix any style issues you had upgrading to 1.0 last week

//my-app/config/environment.js
if (environment === 'development') {
  ENV['ember-cli-hot-loader'] = {
    tagless: true
  }
}

[ianpetzer]

Oh that is great!

Thanks so much for letting me know

On Fri, Jul 13, 2018 at 5:18 AM Toran Billups notifications@github.com wrote:

@ianpetzer https://github.com/ianpetzer If you upgrade to the latest hot reloader v1.1.0 you can now opt in to the tagless configuration and it should fix any style issues you had upgrading to 1.0 last week

//my-app/config/environment.jsif (environment === 'development') { ENV['ember-cli-hot-loader'] = { tagless: true } }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/toranb/ember-cli-hot-loader/issues/82#issuecomment-404713700, or mute the thread https://github.com/notifications/unsubscribe-auth/ABHZh9MtBFNg346HsEcVnDsbKqhTbe4Zks5uGBFzgaJpZM4VD-8u .