Vulcanization breaks Polymer code (Uncaught TypeError: undefined is not a function)
I have a Single Page Application in Polymer. Everything works fine, but when I cure it I always Uncaught TypeError: undefined is not a function
end up with the default Polymer in many places in the code. But my application is still working. But I can't see the paper toast after clicking the Register button on the item <my-register-box>
.
Mine index.html
looks like this:
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
....
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="bower_components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/flatiron-director/flatiron-director.html">
....
<link rel="import" href="register-box.html">
...
</head>
<body>
...
<my-register-box name="{{name}}" email="{{email}}" url="{{url}}"></my-register-box>
...
And register-box.html
like this:
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-input/paper-input-decorator.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<polymer-element name="my-register-box" attributes="name email url">
<template>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="jsencrypt.min.js"></script>
<paper-input-decorator label="Enter your name" floatingLabel error="Required">
<input is="core-input" id="form_name" required>
</paper-input-decorator>
...
<paper-toast id="formTermsToast" text="You must agree with temrs"></paper-toast>
<paper-toast id="formValidToast" text="Form is not valid"></paper-toast>
....
<paper-fab id="fab" icon="check" title="Register"
on-click="{{register}}"></paper-fab>
</template>
<script type="text/javascript">
Polymer({
name: '?',
email: '?',
url: '?',
autoValidate: false,
valid: false,
observe: {
'$.form_name.validity.valid': 'validate',
'$.form_email.validity.valid': 'validate',
'$.form_sa_uname.validity.valid': 'validate',
'$.form_sa_pass.validity.valid': 'validate',
'$.formTerms.checked': 'validate'
},
validate: function() {
this.valid = true;
if((!this.readyState) || (!this.autoValidate))
return;
var $d = this.shadowRoot.querySelectorAll('paper-input-decorator');
var th = this;
Array.prototype.forEach.call($d, function(d) {
d.isInvalid = !d.querySelector('input').validity.valid;
if(d.isInvalid) {
th.$.formValidToast.show();
th.valid = false;
}
});
if(!this.$.formTerms.checked) {
this.$.formTermsToast.show();
this.valid = false;
}
},
registerEmail: function() {
...
},
register: function() {
this.autoValidate = true;
this.validate();
...
}
});
</script>
</polymer-element>
My vulcanization:
vulcanize --inline index.html
I am getting this error like here (after calling {{register}})
....
renderOpened: function() {
this.notifyResize(); //Uncaught TypeError: undefined is not a function
....
but this is not even my code: - /
source to share
I faced this same issue with the -csp option in the latest build of Polymer and Vulcanize.
This is due to the new mixer resizer that was recently introduced and how it cures. For some reason the mixin shows up at the bottom of the page and causes problems.
It is a function block that starts as follows:
(function (scope) {
/**
`Polymer.CoreResizable` and `Polymer.CoreResizer` are a set of mixins that can be used
in Polymer elements to coordinate the flow of resize events between "resizers" (elements
that control the size or hidden state of their children) and "resizables" (elements that
need to be notified when they are resized or un-hidden by their parents in order to take
action on their new measurements).
Elements that perform measurement should add the `Core.Resizable` mixin to their
Polymer prototype definition and listen for the `core-resize` event on themselves.
This event will be fired when they become showing after having been hidden,
when they are resized explicitly by a `CoreResizer`, or when the window has been resized.
Note, the `core-resize` event is non-bubbling.
`CoreResizable` must manually call the `resizableAttachedHandler` from the element's
`attached` callback and `resizableDetachedHandler` from the element `detached`
callback.
@element CoreResizable
@status beta
@homepage github.io
*/
scope.CoreResizable = {
... [rest of code block here] ...
}
Move this piece of code to the beginning of your script block (it is referenced by paper toast) and it should work. I guess this will probably be fixed in an upcoming release of Vulcanize.
source to share