ember-custom-elements
ember-custom-elements copied to clipboard
Template-only components cause failure to boot application
It seems that the presence of this addon causes issues when a template-only component is present in the application where it is installed. We are seeing an error like this, which goes away when a .js
file is added for that component
My hunch is that the issue is the way that this addon is walking the list of possible components to see if they have the custom element decorator attached. I'll open up a PR with a template-only component present to see if we can fix that up.
@alexlafroscia I'm unable to reproduce this with v2.0.3. I made a fresh add-on, installed the add-on, added some components, one with a class and one template-only. That error doesn't occur. There's got to be some setup detail I'm not aware of.
Could it have something to do with this?: https://github.com/ember-cli/ember-cli/issues/9043
If it's coming from this add-on, I'm not sure how it would since a template-only module isn't going to have ember-custom-elements
as an import, so it should just skip right over and do nothing to it.
Ok, I can reproduce it when I use ember-custom-elements
in an add-on and then import that add-on into another app. I guess I never caught that because it doesn't seem to happen in the dummy app.
https://github.com/ember-cli/ember-cli-htmlbars/blob/b9a7cb2d5d27e2c650f16f77058c6e13d75160f5/lib/colocated-broccoli-plugin.js#L154
Seems like something about the way that a module is being evaluated in the initializer makes it think there's no default export, since it occurs even if the use of the decorator itself is commented out.
So I discovered that the error happens when I have a template-only component inside my app with the same name as a component in the add-on that uses custom elements. If I rename it, the error goes away and the custom elements work and everything.
My guess is that, if a component in the add-on has the same name as one in the app, the part where resolveRegistration
is called may be inadvertently resolving the one for the template-only component, which is why that error is occurring(since template-only components don't have an exported module per-se).
It's bedtime here, so I'll investigate this more tomorrow. There needs to be a way to resolve the correct module and not the wrong one, but I'm not sure that's even possible when a component name is duplicated in the app.
Hmm, that's interesting... In our case, the template-only component was inside an app which used ember-custom-elements
; no intermediary addon. Additionally, the template-only component was unrelated to anything that had the customElement
decorator applied.
It's possible I'm behind on my version of the addon here, and that some of your recent changes make it work?
Ah, ok, I thought you were still consuming it in an add-on.
In that case, I still can't seem to reproduce it when I build a new app with Ember 3.19. I also tried with ember 3.14. Even when deoptimizeModuleEval is enabled, it doesn't seem to have a problem evaluating a template-only component, which is interesting.
Is email-list-modal.hbs
the one that's template-only? Just want to know for sure because I don't have any other theories going.
It's possible I'm behind on my version of the addon here, and that some of your recent changes make it work?
I'm using version 2.0.3 directly from NPM when I try to reproduce. (i.e. I'm not specifying the Git repo or anything like that)