Adding vaadin-password-field leads to an exception

[mpschaeuble]

I tried to add a password-field by adding <vaadin-password-field></vaadin-password-field> to app.component.html and import '@vaadin/vaadin-text-field/vaadin-password-field.js'; in app.component.ts

Unfortunately, I get the following exception on runtime:
zone.js:682 Unhandled Promise rejection: Object prototype may only be an Object or null: undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Object prototype may only be an Object or null: undefined at setPrototypeOf (<anonymous>) at Module.__extends (tslib.es6.js:25) at vaadin-password-field.js:45 at Module../node_modules/@vaadin/vaadin-text-field/src/vaadin-password-field.js (vaadin-password-field.js:156) at __webpack_require__ (bootstrap:83) at Module../node_modules/@vaadin/vaadin-text-field/theme/lumo/vaadin-password-field.js (vaadin-password-field.js:1) at __webpack_require__ (bootstrap:83) at Module../node_modules/@vaadin/vaadin-text-field/vaadin-password-field.js (vaadin-password-field.js:1) at __webpack_require__ (bootstrap:83) at Module../src/app/app.component.ts (0.js:11700) TypeError: Object prototype may only be an Object or null: undefined at setPrototypeOf (<anonymous>) at Module.__extends (http://localhost:4200/vendor.js:77134:5) at http://localhost:4200/0.js:9537:52 at Module../node_modules/@vaadin/vaadin-text-field/src/vaadin-password-field.js (http://localhost:4200/0.js:9648:2) at __webpack_require__ (http://localhost:4200/runtime.js:84:30) at Module../node_modules/@vaadin/vaadin-text-field/theme/lumo/vaadin-password-field.js (http://localhost:4200/0.js:10431:87) at __webpack_require__ (http://localhost:4200/runtime.js:84:30) at Module../node_modules/@vaadin/vaadin-text-field/vaadin-password-field.js (http://localhost:4200/0.js:10501:94) at __webpack_require__ (http://localhost:4200/runtime.js:84:30) at Module../src/app/app.component.ts (http://localhost:4200/0.js:11700:108)

Any ideas?

[mpschaeuble]

Created a bug report in the corresponding project: vaadin/vaadin-text-field#396

[tomivirkki]

I tracked this down to the @extends annotation we use in some of our components. It messes up the es5 conversion executed by the prepare:es5 script of the angular base starter.

We should fix this in our components (remove the annotations if they're not needed), but as a workaround you could add a postinstall script that removes the annotations, for example: "postinstall": "find . -name 'vaadin*.js' -exec sed -i '' 's|@extends Vaadin.*||' {} +"

[pekam]

@vaadin/vaadin-text-field 2.4.8 has been released and it should fix the issue.