Browser error: this.querySelector(...).validate is not a function
Opened this issue · 10 comments
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?
Same here
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.
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.
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.
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.
@jumo-sballing were you able to make it run ?
No. unfortunately not.
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
Please pull master and see if you still have the issue!
I can confirm the error seems to be fixed on latest master.