Polymer: [0.9] Uncaught TypeError: Invalid value used as weak map key

[teckays]

This error is thrown in collection.html:131 if a binding like <span>{{value}}</span> contains an ! character.

[kevinpschaaf]

Could you please provide a quick reproduction case? Thanks.

[teckays]

I'm trying to replicate the error and can't get it done. In my code this is thrown it inside a template iteration through an ajax response object. I'll keep trying, hopefully I can reproduce it! Thanks.

[teckays]

Still not able to replicate the case in jsbin. Would you like me to provide a link to the actual app so you could investigate the error from there?

[teckays]

http://demo:[email protected]/search/?location=moldova&skill=c&page=8

I have consoled the object received from ajax for you to check the values. I think that on this particular page the error is thrown by iterating response.result.skills. Here's the code responsible for iterations:

...
<template is="dom-repeat" items="{{response.result.items}}">
  ...
      <div class="skills">
          <template is="dom-repeat" items="{{item.skills}}" as="s">
              <div class="skill">
                  <a href="{{linkBySkill(s)}}">{{s}}</a>
              </div>
          </template>
      </div>
    ...
</template>
...

<script>
    Polymer({
        is: "my-component",

        ...
        linkBySkill: function(skill){
            return '/search/?location=' + this.location + "&skill=" + skill;
        },
        ...
    });
</script>

[zclark]

You can reproduce this error message by creating a listener using

listeners: {
  "noexist.tap": "_handler"
}

while having no node with id of noexist in your template, possibly the cause?

[Draccoz]

Polymer version 1.2.3 still has the above issue. Reproducible by attaching event listener to element inside dom-if template, example:

<dom-module id="login-form">
  <template>
    <template is="dom-if" if="[[!loggedIn]]">
      <form id="login" action="." method="post">
        <button>Log in</button>
      </form>
    </template>
  </template>
</dom-module>

listeners: {
  "login.submit": "_handler"
}

Pretty annoying and seems as old thing, would be nice if its fixed :).

[dfreedm]

There's actually two separate issues here. The first is related to dom-repeat, and the second is related to the listeners block.

In the dom-repeat case, we'll need a working reproduction to investigate.

For the listeners case, it is not supported to listen by id for dynamically created elements, including those created by dom-if. Instead, you should put your handler directly on the node you need to listen on.

<dom-module id="login-form">
  <template>
    <template is="dom-if" if="[[!loggedIn]]">
      <form id="login" action="." method="post" on-submit="_handler">
        <button>Log in</button>
      </form>
    </template>
  </template>
</dom-module>

[kevinpschaaf]

jsBin showing use of declarative event for the dom-if issue: http://jsbin.com/jorifizimu/edit?html,console,output

[dfreedm]

Closing the dom-repeat issue. If you still have this problem, please reopen.

[ghost]

If you want to reproduce the same error with dom-repeat I think the best example is <hot-table>
I get the same error with using the following dependencies:

  "dependencies": {
    "webcomponentsjs": "^0.7.21",
    "polymer": "Polymer/polymer#^1.4.0",
    "hot-table": "^0.4.0",
    "iron-elements": "polymerelements/iron-elements#^1.0.9",
    "paper-elements": "polymerelements/paper-elements#^1.0.7",
    "iron-ajax": "polymerelements/iron-elements/iron-ajax#^1.2.0"
  }

I just tried to define a handler pointing to my grid in the ready() method of my element as bellow:

this.listen(this.$.myGrid, 'change', 'onChangeMyGrid');

The error:

polymer.html:483 
Uncaught TypeError: Invalid value used as weak map key
Polymer.Base._addFeature._recordEventHandler @polymer.html:483
Polymer.Base._addFeature._createEventHandler @ polymer.html:510
Polymer.Base._addFeature.listen @ polymer.html:464
Polymer.ready @ cas-grid.js:136
Polymer.Base._addFeature._invokeBehavior @ polymer-micro.html:396
Polymer.Base._addFeature._doBehavior @ polymer-micro.html:391
Polymer.Base._addFeature._readySelf @ polymer-mini.html:89
Polymer.Base._addFeature._ready @ polymer-mini.html:76
Polymer.Base._addFeature._tryReady @ polymer-mini.html:61
Polymer.Base._addFeature._initFeatures @ polymer.html:3430
Polymer.Base.createdCallback @ polymer-micro.html:194

jquery-1.7.2.min.js:1 /deep/ combinator is deprecated. 
See https://www.chromestatus.com/features/6750456638341120 for more details.

Even though the element is not officially ready but it might give you an insight into this bug

[marcelhageman]

Since I ran into this thread based on my search for the error Invalid value used as weak map key, here's something that might help other Googlers like myself. For people who want to emit a custom event onto an element, the trick is to not use a period in the event name:

Before:

listeners: {
    'balance.add': '_addBalance'
},

After:

listeners: {
    'balanceAdd': '_addBalance'
},

A mere period was the culprit. Probably makes sense. No idea why.

[yangchenyun]

Encounter the same issue here; the cause seems to be the element to be listened doesn't exist in the DOM when listen is called.

I solve this by wrapping listen inside the attached callback to make sure the element is there.

[yanlee26]

got