Browser error: this.querySelector(...).validate is not a function

[jumo-sballing]

After npm i & grunt i got this output:

Running "less:development" (less) task
>> 22 stylesheets created.

Running "pug:compile" (pug) task
>> 20 files created.

Running "sync:main" (sync) task

Running "clean:0" (clean) task
>> 1 path cleaned.

Running "connect:server" (connect) task
Started connect web server on http://localhost:9000

Running "watch" task
Waiting...

Server is running but I got a error in my browser console (chrome). Site is empty.

Uncaught TypeError: this.querySelector(...).validate is not a function
    at HTMLElement.validateInput (crouton-connect-mqtt.html:132)
    at HTMLElement._annotatedComputationEffect (polymer.html:1599)
    at HTMLElement._effectEffects (polymer.html:1402)
    at HTMLElement._propertySetter (polymer.html:1386)
    at HTMLElement.__setProperty (polymer.html:1395)
    at HTMLElement._applyConfig (polymer.html:1997)
    at HTMLElement._afterClientsReady (polymer.html:1991)
    at HTMLElement._ready (polymer-mini.html:75)
    at HTMLElement._readyClients (polymer-mini.html:83)
    at HTMLElement._ready (polymer-mini.html:71)

Tested with nodejs 6.11.1 and 8.2.1.
What did I do wrong?

[ghost]

Same here

[edfungus]

I'm pretty sure the problem is the with the input Polymer component I used. I think it is paper-input. So this.querySelector(...) finds one of the paper-input fields in the crouton-connect-mqtt which should be the box where the MQTT details go into. The old Polymer element had a validate() method but perhaps the new one doesn't.

The easiest fix would be to use an older version of paper-input. If I have time, I'll look more into this. Changing the version in bower.json should be sufficient.

[edfungus]

Well looking at the bower.json, paper-input is not there.... so perhaps another Polymer element loads it in which means an entry will need to be added to get an older version of paper-input... all while hoping that the old version works with everything else.

[jumo-sballing]

Maybe it helps:

├─┬ paper-dropdown-menu#2.0.0
│ ├── iron-a11y-keys-behavior#1.1.9
│ ├── iron-form-element-behavior#1.0.7 (2.0.0 available)
│ ├── iron-icon#2.0.0
│ ├─┬ iron-iconset-svg#2.0.0
│ │ ├── iron-meta#1.1.3
│ │ └── polymer#1.4.0
│ ├── iron-validatable-behavior#1.1.2 (2.0.0 available)
│ ├── paper-behaviors#1.0.13
│ ├─┬ paper-input#2.0.1
--
├─┬ paper-slider#2.0.2
│ ├── iron-a11y-keys-behavior#1.1.9
│ ├── iron-behaviors#1.0.18
│ ├── iron-flex-layout#1.3.7
│ ├── iron-form-element-behavior#1.0.7
│ ├── paper-behaviors#1.0.13
│ ├─┬ paper-input#2.0.1

paper-dropdown-menu and paper-slider depends on paper-input.

[jumo-sballing]

So, I manually copied first paper-ui v1.1.24 and then v1.1.17 to public/common/bower and tested both in my chrome. Same result:

Uncaught TypeError: this.querySelector(...).validate is not a function

Maybe I did not do it right.

[jbrazio]

@jumo-sballing were you able to make it run ?

[jumo-sballing]

No. unfortunately not.

[edfungus]

Looks like bower versions were not specified correctly (needed to be more specific). I have the working combinations of the versions here: https://pastebin.com/BrQ3MXFj from a running instance of Crouton. Just dropping this here if someone wants to look at it. I'll probably try to fix the bower.json soon

[edfungus]

Please pull master and see if you still have the issue!

[jbrazio]

I can confirm the error seems to be fixed on latest master.