Emberjs - component using parent template after upgrading to ember 5.12 from ember 3.16

Question

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-bunsen/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)
  },

  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.

That looks more like pods than template colocation to me. You shouldn't need to import as Ember should figure that out for you when using a standard layout. You should rename the files to password-with-generator.js/hbs and give them up into the components folder. I think there is a codemod to do this en masse — Caltor
– Caltor, Commented May 19 at 0:10
Yes, it is a pod. And I tried the suggestion, but it ends up with conflicting names error. — Saurabh Batra
– Saurabh Batra, Commented May 19 at 17:38
Did you move the files up into the components folder and delete the password-with-generator folder? I dont think this will solve your template problem anyway. That's more likely an issue with extending a custom object — Caltor
– Caltor, Commented May 19 at 22:44

Caltor · Accepted Answer · 2025-05-19 00:14:59Z

0

I would advise against extending a parent component (favour composition over inheritance). Move your shared functionality to utils (if pure logic functions) or a service (if requires data or state etc) Then extend EmberObject instead, or better yet refactor the component as a native class.

answered May 19 at 0:14

Caltor

2,7961 gold badge29 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Emberjs - component using parent template after upgrading to ember 5.12 from ember 3.16

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related