gatanaso/multiselect-combo-box-flow

DOMException with Vaadin 17.0.0

Closed this issue ยท 7 comments

The multiselect-combo-box works great with Typescript client view in Vaadin 16.0.3. After updating to Vaadin 17.0.0 the following exception is thrown:
vaadin-item.js?0d7d:89 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-item" has already been used with this registry at eval (webpack-internal:///../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/src/vaadin-item.js:96:16) at Module.../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/src/vaadin-item.js (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:1136:1) at __webpack_require__ (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:64:30) at eval (webpack-internal:///../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/theme/lumo/vaadin-item.js:3:77) at Module.../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/theme/lumo/vaadin-item.js (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:1160:1) at __webpack_require__ (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:64:30) at eval (webpack-internal:///../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-item-styles.js:5:103) at Module.../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-item-styles.js (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:1280:1) at __webpack_require__ (http://localhost:8081/VAADIN/build/vaadin-bundle-038fd2c1653433b061c1.cache.js:64:30) at eval (webpack-internal:///../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-light.js:3:90) eval @ vaadin-item.js?0d7d:89 ../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/src/vaadin-item.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:1136 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ vaadin-item.js?badb:1 ../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/node_modules/@vaadin/vaadin-item/theme/lumo/vaadin-item.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:1160 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ vaadin-combo-box-item-styles.js?6dca:1 ../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-item-styles.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:1280 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ vaadin-combo-box-light.js?f32d:1 ../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.3.0/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-light.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:1292 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ multiselect-combo-box.js?5bee:1 ../node_modules/.pnpm/registry.npmjs.org/multiselect-combo-box/2.4.2/node_modules/multiselect-combo-box/theme/lumo/multiselect-combo-box.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:8178 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ multiselect-combo-box.js?6375:1 ../node_modules/.pnpm/registry.npmjs.org/multiselect-combo-box/2.4.2/node_modules/multiselect-combo-box/multiselect-combo-box.js @ vaadin-bundle-038fd2c1653433b061c1.cache.js:8094 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ dashboard-view.ts:14 ./views/dashboard/dashboard-view.ts @ vaadin-bundle-038fd2c1653433b061c1.cache.js:18321 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 eval @ index.ts?5b66:1 ./index.ts @ vaadin-bundle-038fd2c1653433b061c1.cache.js:18129 __webpack_require__ @ vaadin-bundle-038fd2c1653433b061c1.cache.js:64 (anonymous) @ vaadin-bundle-038fd2c1653433b061c1.cache.js:199 (anonymous) @ vaadin-bundle-038fd2c1653433b061c1.cache.js:202

Hi @olaf-2 and thanks for opening this issue. Are you using server side Vaadin? This is the repository for the web component, and the repository for the "Java wrapper" is here: https://github.com/gatanaso/multiselect-combo-box-flow

Also, as a side note, I haven't yet added support for Vaadin 17, contributions are always welcome :)

No, in this case I use the TypeScript view in Vaadin 17. Coming from the Java side I think I am not the right person to contribute since I have no deeper JS knowledge.

@olaf-2 Could you please provide a minimal reproducible project, as that would make it easier to find the root cause?
Also, have you tried deleting the node_modules directory and package-lock.json file and rebuilding the project?

edit: Did you get any errors in the server console?

It might have been related to this issue vaadin/flow#9051 which has already been fixed in Vaadin. I kindly ask if you can re-test when a new version of Vaadin is released to see if the issue still occurs.

Thank you

Hi,

I think it's related to this ticket: #59

Basically the vaadin-multi-combobox needs a different vaadin-item version than Vaadin 17. I'm not sure how to fix it. Perhaps by changing the vaadin-item version of the component but I'm not sure if you can have the same version for Vaadin 14 and 17.

Thanks @jcgueriaud1 for looking into this further, I really appreciate it ๐Ÿ™

Hi. Sorry for the late answer and for raising the issue in the wrong place. With Vaadin 17.0.8 there are no problems anymore.