Template inheritance - ember 5.12

Questions
1

I recently updated my app from ember 3.16 to ember 5.12 and have started seeing a weird issue. My component has started using template from the parent component is it extending.

I am using co-located template in my app

password-with-generator
       |
       ---- component.js
       ---- template.hbs

And the code is as follows component.js

import {computed, get, set} from '@ember/object'
import {alias} from '@ember/object/computed'
import PasswordInput from 'internal/components/inputs/password'
import _ from 'lodash'
import layout from './template'

export default PasswordInput.extend({

  layout,

  showGeneratePassword: computed('disabled', 'options.policyRules',
    // logic
    ).readOnly(),

  init () {
    this._super(...arguments)

    set(this, 'layout', layout)  // have tried without it also, have also tried this.layout = layout
  },

  actions: {
    generatePassword () {
     //logic
    }
  }
})

template.hbs

{{log 'my template'}}
<div>My template</div>

But after upgrading to ember 5.12, instead of picking this template, template from PasswordInput is used (which is also using classic syntax and colocated tempalate, index.js and index.hbs)

I have tried removing layout from component and couple other things, but nothing works with new ember. I can’t update it to use glimmer component as I still need PasswordInput’s functionality which I can’t update.

Is there any way to achieve old functionality?

Note: I tried renaming to password-with-generator.js/hbs too, but that ends up with conflicting same names error (probably, hbs is compiled with same-name.js file.

1 Like
2

Hey @Saurabh_Batra thanks for the question. I’m pretty sure that between the two versions you are mentioning the behaviour of co-located components did change :thinking: There are a few things that you can do to narrow down this problem.

Now first of all I highly recommend that you don’t upgrade from 3.16 directly to 5.12 :see_no_evil_monkey: there are a lot of processes that can go wrong in that particular upgrade and there is a recommended way to do it and a faster way if that is what you’re looking for.

The recommended way to do it is to upgrade to each LTS of Ember one after the other. Every 4 releases there is a LTS so if your minor number is divisable by 4 then you are on an LTS (most likely). So in your case that would be upgrading to 3.20 → 3.24 → 3.28. At this point, before upgrading to 4.0, you should stop and remove all deprecations in your app. Then you should run your test suite with ember-cli-deprecation-workflow set to throw on all deprecations. You can read up on that process in the ember-cli-deprecation-workflow docs.

Now you should be able to upgrade to 4.0 and then repeat the process.

If you’re trying to get onto the latest quickly then you can go to the last minor release in each major you’re upgrading through and still do the step about resolving deprecations i.e. upgrade to 3.28, resolve all deprecations, upgrade to 4.12, resolve deprecations etc.

This process is good because you get a chance to clear deprecations before the code they are deprecating is removed. This makes it much easier to actually fix things, and the errors you get by just upgrading can be very confusing. I’m pretty sure there was a deprecation and a change to the behaviour of co-located components so if you follow the process above then you will be guided to the right way to fix it.

Another reason this method for upgrading Ember apps can be good is because you can see when things broke. You know exactly what version caused the problem and we can narrow down the issue rather than trying to figure out too many changes all at once.

If you still get stuck with this process you can then create a little reproduction that will help us diagnose the issue that you’re facing :+1:

3

All great advice. I’ll just say I wouldn’t necessarily recommend stopping right at majors, I’d go straight through to the next LTS (so 3.28 => 4.4). I found from experience that 4.0 didn’t have bugfixes backported (it wasn’t an LTS) so I had some issues.

2 Likes