Menu
I have single page app in Polymer. Everything works works great but when I vulcanize it I always get Uncaught TypeError: undefined is not a function on many places of Polymer's default code. But after all my app still works. But I cannot see any paper toast after clicking on "Register" button in <my-register-box> element.
My index.html look 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 get that error for example here (after calling {{register}})
....
renderOpened: function() {
this.notifyResize(); //Uncaught TypeError: undefined is not a function
....
but it's not even my code :-/
553
I ran into this exact same problem with the --csp option in the latest build of Polymer and Vulcanize.
It's related to the new resizer mixin that was recently introduced, and how that gets vulcanized. For some reason the mixin is rendered at the bottom of the page and that causes problems.
It's the 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`'s must manually call the `resizableAttachedHandler` from the element's
`attached` callback and `resizableDetachedHandler` from the element's `detached`
callback.
@element CoreResizable
@status beta
@homepage github.io
*/
scope.CoreResizable = {
... [rest of code block here] ...
}
Move this piece of code to the top of your script block (it's referenced by the paper-toast), and it should work. I'm assuming that this will probably be corrected in an upcoming release of Vulcanize.
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
