Error in 2.7.0 but not 2.6.0: Uncaught Error: Assertion Failed: Attempted to register a view with an id already in use: null

[notmessenger]

Updated

The bug is that since elementId is now conditionally initialized based on tagName (was this way in 1.12 and below), if the tagName is inherited as '' and you set it again post this._super(...arguments);, then elementId === null but since tagName is now set to not be "" then when the view is registered, it will be registered as "null" causing problems if you render more than one.

---

When using Ember 2.7.0

When there are two instances of the same component used in a template the error of Uncaught Error: Assertion Failed: Attempted to register a view with an id already in use: null is thrown.

If the component is used in a parent route's template as well as the child's, when navigating away these deprecations are thrown:

DEPRECATION: A property of <regressionDemo@view:-outlet::ember413> was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation. [deprecation id: ember-views.dispatching-modify-property]
        at logDeprecationStackTrace (http://localhost:4200/assets/vendor.js:16676:19)
        at HANDLERS.(anonymous function) (http://localhost:4200/assets/vendor.js:16783:7)
        at raiseOnDeprecation (http://localhost:4200/assets/vendor.js:16706:12)
        at HANDLERS.(anonymous function) (http://localhost:4200/assets/vendor.js:16783:7)
        at invoke (http://localhost:4200/assets/vendor.js:16799:7)
        at deprecate (http://localhost:4200/assets/vendor.js:16767:32)
        at Object.deprecate (http://localhost:4200/assets/vendor.js:29639:37)
        at Class.exports.default._emberMetalMixin.Mixin.create._Mixin$create.scheduleRevalidate (http://localhost:4200/assets/vendor.js:54123:22)
        at http://localhost:4200/assets/vendor.js:27891:32
7ember.debug.js:6568 DEPRECATION: A property of <regressionDemo@view:-outlet::ember413> was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation. [deprecation id: ember-views.dispatching-modify-property]
        at logDeprecationStackTrace (http://localhost:4200/assets/vendor.js:16676:19)
        at HANDLERS.(anonymous function) (http://localhost:4200/assets/vendor.js:16783:7)
        at raiseOnDeprecation (http://localhost:4200/assets/vendor.js:16706:12)
        at HANDLERS.(anonymous function) (http://localhost:4200/assets/vendor.js:16783:7)
        at invoke (http://localhost:4200/assets/vendor.js:16799:7)
        at deprecate (http://localhost:4200/assets/vendor.js:16767:32)
        at Object.deprecate (http://localhost:4200/assets/vendor.js:29639:37)
        at Class.exports.default._emberMetalMixin.Mixin.create._Mixin$create.scheduleRevalidate (http://localhost:4200/assets/vendor.js:54123:22)
        at http://localhost:4200/assets/vendor.js:27891:32
ember.debug.js:6568 DEPRECATION: A property of <regressionDemo@view:-outlet::ember413> was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation. [deprecation id: ember-views.dispatching-modify-property]
        at logDeprecationStackTrace (http://localhost:4200/assets/vendor.js:16676:19)
        at HANDLERS.(anonymous function) (http://localhost:4200/assets/vendor.js:16783:7)
        at raiseOnDeprecation (http://localhost:4200/assets/vendor.js:16706:12)
        at HANDLERS.(anonymous function) (http://localhost:4200/assets/vendor.js:16783:7)
        at invoke (http://localhost:4200/assets/vendor.js:16799:7)
        at deprecate (http://localhost:4200/assets/vendor.js:16767:32)
        at Object.deprecate (http://localhost:4200/assets/vendor.js:29639:37)
        at Class.exports.default._emberMetalMixin.Mixin.create._Mixin$create.scheduleRevalidate (http://localhost:4200/assets/vendor.js:54123:22)
        at Class.setOutletState (http://localhost:4200/assets/vendor.js:27941:14)

When using Ember 2.6.0

These problems do not occur.

How to reproduce

I have created an application recreating this setup, located at https://github.com/notmessenger/regressionDemo If you change the Ember version to 2.6.0 the errors will then go away.

[Serabe]

Hello, @notmessenger:

I see that your demo application uses several external addons. Can you please create a standalone version of this report or even better, a twiddle?

That would speed up the process since we would not need to look at your addons' code.

Thank you!

[notmessenger]

@Serabe I can but until I get the time to the fact that they same external add ons work in 2.6.0 but not in 2.7.0 is telling, as the add-on code hasn't changed any between these dependency installs.

[pixelhandler]

@notmessenger do all of those addons have passing builds in Ember 2.7.0?

Also to debug whether the issue is in a simple app with only the change between Ember versions is super helpful. Then perhaps add back in your add ons util the issue is reproduced if not already present in simply using Ember 2.7

It would be good to narrow down if the issue is a combination of an app, an ember version and a specific addon.

[pixelhandler]

@notmessenger In order to identify whether this issue is a bug we need to isolate any errors. Can you make a simpler example, less addons?

[notmessenger]

It appears that setting tagName to '' in https://github.com/ember-forge/ember-forge-ui/blob/2ca263029cc03aac40e672f16d88dbfe0fe97bba/addon/components/ef-list.js#L29 and then programmatically determining what its value should be and setting it in https://github.com/ember-forge/ember-forge-ui/blob/2ca263029cc03aac40e672f16d88dbfe0fe97bba/addon/components/ef-list.js#L124-L126 within the same code is what is causing the problem. Removing the "initialization" of tagName keeps these errors from occurring.

If this inquiry needs to now be moved to another venue (i.e. StackOverflow or other) let me know, but I am curious about this error. I would have expected the value of tagName "coming out" of the component to have been the final determination of it, not causing the error that occurred. Is anyone able to shed some light on this and update my incorrect understanding?

[notmessenger]

I added a noAddons2 branch of https://github.com/notmessenger/regressionDemo/tree/noAddons2 that can demonstrates this issue between Ember 2.6 and 2.7 without using any external add ons to do so.

[krisselden]

Only views with elements should be registered for events and you can't set a view with events to be tag less, while that hasn't always fast failed it has never worked. Also we stopped setting up elementId prop for tagless views since it makes no sense for a tagless view. I'm not sure if the error is from the addon or ember but if this addon expects to setup events it seems dubious to make it tagless. I'll investigate more in the morning

[krisselden]

I can't reproduce this issue without the add-ons. I don't have time at the moment to troubleshoot the add-ons. My guess is that you are trying to make a component designed to use events to be tagless and while that may not have errored before it isn't something that is supported.

[krisselden]

https://ember-twiddle.com/7a87a1e6bd37552fb29e31cbeb860b01?openFiles=components.my-component.js%2Ctemplates.components.my-component.hbs

[notmessenger]

@krisselden The noAddons2 branch of https://github.com/notmessenger/regressionDemo/tree/noAddons2 does not use add ons and recreates this if that helps.

[notmessenger]

Even if tagName is set to '' (i.e. tagless) (https://github.com/notmessenger/regressionDemo/blob/noAddons2/app/components/ef-list.js#L29) it's value is set during init() (https://github.com/notmessenger/regressionDemo/blob/noAddons2/app/components/ef-list.js#L125 and https://github.com/notmessenger/regressionDemo/blob/noAddons2/app/components/ef-list.js#L49).

So does this mean that init "occurs" after property values have been read, set, used, etc? I expect to be able to make any modifications needed/desired during init and not run into such issues.

Thanks!

[Serabe]

I've tried that branch but saw no errors in the console. Might it be solved in 2.7.1?

[notmessenger]

@Serabe If you uncomment https://github.com/notmessenger/regressionDemo/blob/noAddons2/app/components/ef-list.js#L29 the error will appear.

[Serabe]

Ok. I've been debugging the issue and here are some results:

1. In ViewSupport#init, an elementId is generated if there is not one and tagName is different than the empty string.
2. When a component enters the InDOM state, the view is registered if the tagName is not the empty string.

The problem is that between (1) and (2) a lot of things can happen changing the tagless consideration for the component.

I think this is an issue that requires at least two approaches to be fixed:

1. Document and make sure people understand that components with tagName: '' are tagless and what the limitations are.
2. Choose the point where a component needs to be marked as tagless and mark it in a way that cannot be modified later (as is happening now).

As 2.8 is getting closer, it might be quicker to add a test for this issue and modify ViewSupport to always generate an elementId.

Pinging @rwjblue because of this comment in a related close issue (#13627)

[rwjblue]

https://github.com/emberjs/ember.js/pull/14108 should fix

[Serabe]

Cannot reproduce this since 2.8. @notmessenger do you still have the issue?

[pixelhandler]

@notmessenger does upgrading Ember work to resolve your issue?

[notmessenger]

@Serabe @pixelhandler Upgrading to 2.8 resolves this issue. Sorry I didn't get to this sooner.