Ember.js: Template only glimmer components not working in 3.2?

Created on 11 Jun 2018 · 16Comments · Source: emberjs/ember.js

Seems that in 3.2 template-only-glimmer-components do not work.

Steps to reproduce:

Enable template-only-glimmer-components feature toggle
Create a new component
Add some content to template
Remove the component js file
See that rendered HTML still has ember-view div wrapper

Source

lougreenwood

Most helpful comment

Thanks for the reproduction @dpatz, sorry I missed that.

I’ll try to test that out and see if I can spot what’s going on...

rwjblue on 8 Sep 2018

👍3

All 16 comments

Hmm, this seems to be working for me. I did the following:

ember new testing-togc
cd testing-togc
ember install @ember/optional-features
ember feature:enable template-only-glimmer-components
ember generate component template-only
rm app/components/template-only.js
echo '{{template-only}}' >| app/templates/application.hbs
echo 'Hi!' >| app/templates/components/template-only.hbs
ember s

When I look at the DOM for this I see:

<body class="ember-application">
    <script src="/assets/vendor.js"></script>
    <script src="/assets/test-template-only-glimmer-components.js"></script>

    <div class="ember-view" id="ember274">Hi!
    </div>
</body>

Notice that there is no div wrapper for the component we created, however there is a single class="ember-view" / id="ember888" (which is actually representing the application wrapper, not the component). Maybe this was what you were seeing?

You can also get rid of that div if you'd like, via this command:

ember feature:disable application-template-wrapper

Once that has been ran the DOM looks like:

<body class="ember-application">
    <script src="/assets/vendor.js"></script>
    <script src="/assets/test-template-only-glimmer-components.js"></script>
Hi!
</body>

rwjblue on 11 Jun 2018

I _believe_ this is working correctly (demo'ed above), so I'm going to go ahead and close this issue. Please let me know if I've made a mistake, I'm happy to reopen to dig into a reproduction...

rwjblue on 11 Jun 2018

Strange - your demo also works for me too (although the demo installs ember 3.1, but I manually upgraded to and tested 3.2 as well), however I still get the problem on my main project - I suppose it's a conflict somewhere else so I'll probably have to trawl through my add-ons to figure out the cause... :(

lougreenwood on 11 Jun 2018

@lougreenwood some addon will inject properties/states into components implicitly, so it's impossible(I guess?) to create the template-only component. AFAIK, ember-css-modules is one of them.

nightire on 11 Jun 2018

@nightire interesting - I don't use ember-css-modules, but I do use ember-responsive which looks like it may do something like this....

Are you aware of any way to track down which other add-ons may do this?

lougreenwood on 11 Jun 2018

On further thought, I suppose that unless there's some other magic/not-obvious way in which addons can inject into components, then initialisers will probably be the way to identify addons which may be injecting?

lougreenwood on 12 Jun 2018

@lougreenwood I'm also running into this issue. Did you ever figure out what the issue was?

dpatz on 17 Aug 2018

@rwjblue I followed the steps you posted and it worked when Ember 3.1 was installed. However, when I upgraded to Ember 3.3, it seemed like both template only and application wrapper optional features both stopped working. Here's a repo showing the issue: https://github.com/dpatz/testing_togc

dpatz on 17 Aug 2018

I'm still getting this on 3.4... :(

Any advice on how to track down any add ons which may be injecting properties into components (aside from uninstalling add ons).

Is there some debug flag I can enable to observe this?

lougreenwood on 8 Sep 2018

@lougreenwood maybe you can try to contact @dfreeman to see if he can helps you. He just has solved a similar issue caused by his ember-css-modules, see https://github.com/salsify/ember-css-modules/pull/99

nightire on 8 Sep 2018

👍1

Thanks for the reproduction @dpatz, sorry I missed that.

I’ll try to test that out and see if I can spot what’s going on...

rwjblue on 8 Sep 2018

👍3

@nightire For my issue you're 100% correct. Seems that my use of ember-cli-notifications was pulling in ember-css-modules, which was breaking my template-only components.

Adding this to my package.json fixed it for me:

  "resolutions": {
    "ember-cli-notifications/**/ember-css-modules": "1.0.0-beta.1"
  }

lougreenwood on 8 Sep 2018

🎉1

@rwjblue Any idea what's going on yet? Is there anyway I can help?

dpatz on 13 Sep 2018

@dpatz - the reproduction repo you shared above does not depend (dep or devDep) on @ember/optional-features at all. The presence of config/optional-features.json only works if @ember/optional-features is installed...

rwjblue on 13 Sep 2018

Yeah, you were totally right. However, I did have it installed on my real app and it wasn't working but after upgrading from @ember/optional-features 0.5.2 to 0.6.4 things seem to be working again. Thanks for your help!

dpatz on 14 Sep 2018

Whoops, missed closing this one out when resolved.

rwjblue on 10 Dec 2018

Was this page helpful?

0 / 5 - 0 ratings