Object with component listeners is unexpectedly deleted

CanJS
1

Hello, I have an application that consists of several components (The application is inside webpack bundle, also there is another bundled app on the page), one them is app-links. This component has several event listeners, for example:

events: {
‘.gn-appList-links-toggler click’: function () {
this.viewModel.showMenu();
},
‘.gn-overlay click’: function () {
this.viewModel.hideMenu();
},

Often I get such error, when I click on this component:

delegate.js:47 Uncaught TypeError: Cannot read property ‘click’ of undefined
at HTMLElement.handleEvent

After debugging I noticed that during initial load the component is initialized with other components in can-dom-data-state.js module. In set() function its data is saved in object with certain id (51 as you can see on the screenshot)

0286b92194c73dacd31e87c6c0c5f6a0.png608×571 40 KB

But after all components are initialized and stored with their ids, I see that deleteNode() function executes with some text node that has the same id (51) as app-links component, so all data for this component is deleted from the store, though it exists on the page.
ece0baaeded4cf20c38aa335b08adbad.png608×524 35.4 KB

As the result when I click on app-links component I got error, because data with listeners has been unexpectedly deleted.
Could you advise what’s cause of such behaviour and how to fix it?

2

do you have multiple versions of can-cid installed? npm ls can-cid

3

In my app only there is only one version :

But I noticed that this error doesn’t happen when this app is alone on a page. It happens when there are several others. But the application is inside webpack bundle, it shouldn’t interact with another code, strange.

4

are those other apps adding a _cid on elements?

5

I wonder if something like:

var cids = new Map();
Object.defineProperty(HTMLElement.prototype, "_cid",{
  set(val) { debugger; cids.set(this, val) },
  get() { return cids.get(this) }
})

could detect when elements are having their CID set.

6

When delete function starts executing (just after set function calls) - I launched this cids check code and there are no such elements.

90ebcf11fd1eae199a03cc2bfc2a20f3.png801×877 66.3 KB

7

I see in debugger, that text element has identification property in such format: canFri Aug 10 2018 17:39:36 GMT+0300 (Moscow Standard Time) : “51” . And the deleteNode function executes when other application on the page has been loaded and the data from my application with same 51 id becomes deleted.

8

is it possible to reduce the problem to something that could be shared in a codepen / jsbin / etc?

9

I’ll see what can be done, also want to share this info : my app is build with webpack and canjs 3. Another app is build with canjs 2.2.9 and scripts for this app are inserted without webpack into the page. The error exist only when there are 2 apps on the page.

10

Here’s a JSBin that loads both CanJS 3.0 and CanJS 2.2.9: http://justinbmeyer.jsbin.com/fufiqet/3/

11

I’ve found workaround to avoid this bug: if to define event listeners without css selectors, the error doesn’t appear. So I declared events in such way:

‘{toggler} click’: function () {
this.viewModel.showMenu();
},
‘{overlay} click’: function () {
this.viewModel.hideMenu();
},