ember-custom-elements icon indicating copy to clipboard operation
ember-custom-elements copied to clipboard

Template-only components cause failure to boot application

Open alexlafroscia opened this issue 4 years ago • 4 comments

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

image

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 avatar Jul 07 '20 20:07 alexlafroscia

@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.

Ravenstine avatar Jul 09 '20 02:07 Ravenstine

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.

Ravenstine avatar Jul 09 '20 04:07 Ravenstine

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?

alexlafroscia avatar Jul 09 '20 14:07 alexlafroscia

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)

Ravenstine avatar Jul 10 '20 02:07 Ravenstine