Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-combo-box-item" has already been used with this registry

[sagargit2]

I am using Vaadin 14. I tested this add on by adding the dependencies in pom.xml. Then I only added following lines of code in my project:

        MultiselectComboBox<String> multiselectComboBox = new MultiselectComboBox();
        multiselectComboBox.setLabel("Select items");
        multiselectComboBox.setItems("Item 1", "Item 2", "Item 3", "Item 4"); 

After the addition of above code, the UI stopped rendering. I am getting following errors on the browser console:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-combo-box-item" has already been used with this registry
    at eval (webpack-internal:///../node_modules/@vaadin/vaadin-combo-box/src/vaadin-combo-box-item.js?babel-target=es6:180:16)
    at Module.../node_modules/@vaadin/vaadin-combo-box/src/vaadin-combo-box-item.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-7d5cc31099e26dc79bd4.cache.js:1276:1)
    at __webpack_require__ (http://localhost:8080/VAADIN/build/vaadin-bundle-7d5cc31099e26dc79bd4.cache.js:20:30)
    at eval (webpack-internal:///../node_modules/@vaadin/vaadin-combo-box/src/vaadin-combo-box-dropdown-wrapper.js?babel-target=es6:4:83)
    at Module.../node_modules/@vaadin/vaadin-combo-box/src/vaadin-combo-box-dropdown-wrapper.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-7d5cc31099e26dc79bd4.cache.js:1252:1)
    at __webpack_require__ (http://localhost:8080/VAADIN/build/vaadin-bundle-7d5cc31099e26dc79bd4.cache.js:20:30)
    at eval (webpack-internal:///../node_modules/@vaadin/vaadin-combo-box/src/vaadin-combo-box-light.js?babel-target=es6:8:95)
    at Module.../node_modules/@vaadin/vaadin-combo-box/src/vaadin-combo-box-light.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-7d5cc31099e26dc79bd4.cache.js:1288:1)
    at __webpack_require__ (http://localhost:8080/VAADIN/build/vaadin-bundle-7d5cc31099e26dc79bd4.cache.js:20:30)
    at eval (webpack-internal:///../node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-light.js?babel-target=es6:4:88)

[montadap]

I have a smiliar problem, my UI also stopped rendering after adding the following code:

private MultiselectComboBox<String> mcbSchnittstellen = new MultiselectComboBox<>();

The console in my Firefox browser give the following error
NotSupportedError: 'vaadin-combo-box-item' has already been defined as a custom element vaadin-combo-box-item.js:178 <anonym> vaadin-combo-box-item.js:178 es6 vaadin-bundle-91c7c5262a1e3c609f26.cache.js:2612 __webpack_require__ vaadin-bundle-91c7c5262a1e3c609f26.cache.js:20 <anonym> vaadin-combo-box-dropdown-wrapper.js:1 es6 vaadin-bundle-91c7c5262a1e3c609f26.cache.js:2588 __webpack_require__ vaadin-bundle-91c7c5262a1e3c609f26.cache.js:20 <anonym> vaadin-combo-box-light.js:1 es6 vaadin-bundle-91c7c5262a1e3c609f26.cache.js:2624 __webpack_require__ vaadin-bundle-91c7c5262a1e3c609f26.cache.js:20 <anonym> vaadin-combo-box-light.js:1 es6 vaadin-bundle-91c7c5262a1e3c609f26.cache.js:2684 __webpack_require__ vaadin-bundle-91c7c5262a1e3c609f26.cache.js:20 <anonym> multiselect-combo-box.js:1 es6 vaadin-bundle-91c7c5262a1e3c609f26.cache.js:2768 __webpack_require__ vaadin-bundle-91c7c5262a1e3c609f26.cache.js:20 <anonym> generated-flow-imports.js:1 es6 vaadin-bundle-91c7c5262a1e3c609f26.cache.js:2780 __webpack_require__ vaadin-bundle-91c7c5262a1e3c609f26.cache.js:20 <anonym> vaadin-bundle-91c7c5262a1e3c609f26.cache.js:84 <anonym> vaadin-bundle-91c7c5262a1e3c609f26.cache.js:87 InnerModuleEvaluation self-hosted:1605 evaluation self-hosted:1559

[montadap]

The Bug only occurs when the original vaadin ComboBox and the MultiselectComboBox are used together in one project.

It can be replicated by replacing one MultiselectComboBox with a normal ComboBox in the DemoView
here is a link to a branch where i've replicated the issue
https://github.com/montadap/multiselect-combo-box-flow/tree/issue32

[gatanaso]

Hi both 👋

Thank you for reporting this issue and providing extra details 🙏

The error message is most likely due to the fact that 2 different versions of the vaadin-combo-box are being used. The latest version of the MultiselectComboBox requires vaadin-combo-box version 5.0.9 or higher.

If using Vaadin version 14.0.0, as @montadap branch also shows, this issue is visible. This is mostly due to Vaadin versions prior than 14.0.13 having lower dependency versions of the vaadin-combo-box.

Therefore, updating your project to at least Vaadin version 14.0.13 should resolve the issue (I personally tested this on @montadap branch and there were no issues in the browser console).

Hope this helps,
Goran