gatanaso/multiselect-combo-box-flow

Component does not work with vaadin 22

thomaskiesl opened this issue · 20 comments

thomaskiesl commented

With Vaadin 21 it is working fine. With "22.0.0.beta3" I receive by calling "clean package -Pproduction -e -X" the following error. Other developer have also a problem to use it with Vaadin 22 (https://vaadin.com/directory/component/multiselect-combo-box).

ERROR in ../node_modules/.pnpm/multiselect-combo-box@2.4.2/node_modules/multiselect-combo-box/src/multiselect-combo-box.js
Module not found: Error: Can't resolve '@vaadin/vaadin-combo-box/src/vaadin-combo-box-placeholder.js' in 'C:\Users\thomas\new_workspace\test\node_modules\.pnpm\multiselect-combo-box@2.4.2\node_modules\multiselect-combo-box\src'
 @ ../node_modules/.pnpm/multiselect-combo-box@2.4.2/node_modules/multiselect-combo-box/src/multiselect-combo-box.js 6:0-97 371:26-45 455:39-58
 @ ../node_modules/.pnpm/multiselect-combo-box@2.4.2/node_modules/multiselect-combo-box/theme/lumo/multiselect-combo-box.js
 @ ../target/frontend/generated-flow-imports.js
 @ ../target/index.ts
 @ ./generated/vaadin.ts
Child HtmlWebpackCompiler:
                          Asset      Size  Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  4.39 KiB       0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [0] ../node_modules/.pnpm/html-webpack-plugin@4.5.1_webpack@4.46.0/node_modules/html-webpack-plugin/lib/loader.js!./index.html 823 bytes {0} [built]
<i> [build-status] 1 error and 0 warnings were reported.
<i> [build-status] : Failed to compile.
'
	at com.vaadin.flow.plugin.base.BuildFrontendUtil.runFrontendBuildTool(BuildFrontendUtil.java:433)
	at com.vaadin.flow.plugin.base.BuildFrontendUtil.runWebpack(BuildFrontendUtil.java:373)
	at com.vaadin.flow.plugin.base.BuildFrontendUtil.runFrontendBuild(BuildFrontendUtil.java:357)
	at com.vaadin.flow.plugin.maven.BuildFrontendMojo.execute(BuildFrontendMojo.java:126)
	at org.apache.maven.plugin.DefaultBuildPluginManager.executeMojo(DefaultBuildPluginManager.java:137)
	... 21 more
Caused by: org.zeroturnaround.exec.InvalidExitValueException: Unexpected exit value: 1, allowed exit values: [0], executed command 
Hash: 0aa83d3c14e1e1b16688
Version: webpack 4.46.0
Time: 25954ms
Built at: 24.11.2021 22:14:54
                                                   Asset      Size  Chunks               Chunk Names
     VAADIN/build/vaadin-1-530f5592d3e87f276998.cache.js  1020 KiB       1  [immutable]  
     VAADIN/build/vaadin-2-63a1740790954e33892f.cache.js  1.17 MiB       2  [immutable]  
     VAADIN/build/vaadin-3-759ec3821d5e0df534d7.cache.js  9.27 KiB       3  [immutable]  
     VAADIN/build/vaadin-4-671e38dc8b3b43614ad5.cache.js  86.4 KiB       4  [immutable]  
     VAADIN/build/vaadin-5-2d0d3fb7991fc7e1e525.cache.js  3.41 KiB       5  [immutable]  
     VAADIN/build/vaadin-6-ad66dc27ef76b3bdd57b.cache.js   127 KiB       6  [immutable]  
VAADIN/build/vaadin-bundle-d223e8aacf256a919d66.cache.js   320 KiB       0  [immutable]  bundle
Entrypoint bundle = VAADIN/build/vaadin-bundle-d223e8aacf256a919d66.cache.js
 [21] ../node_modules/.pnpm/@vaadin/vaadin-lumo-styles@22.0.0-beta2/node_modules/@vaadin/vaadin-lumo-styles/style.js 1.38 KiB {0} [built]
 [25] ../node_modules/.pnpm/@vaadin/vaadin-lumo-styles@22.0.0-beta2/node_modules/@vaadin/vaadin-lumo-styles/all-imports.js + 11 modules 39.7 KiB {0} [built]
      | ../node_modules/.pnpm/@vaadin/vaadin-lumo-styles@22.0.0-beta2/node_modules/@vaadin/vaadin-lumo-styles/all-imports.js 931 bytes [built]
      | ../node_modules/.pnpm/@vaadin/vaadin-lumo-styles@22.0.0-beta2/node_modules/@vaadin/vaadin-lumo-styles/badge.js 4.12 KiB [built]
      | ../node_modules/.pnpm/@vaadin/vaadin-lumo-styles@22.0.0-beta2/node_modules/@vaadin/vaadin-lumo-styles/utility.js 952 bytes [built]
      | ../node_modules/.pnpm/@vaadin/vaadin-lumo-styles@22.0.0-beta2/node_modules/@vaadin/vaadin-lumo-styles/utilities/accessibility.
...
[22m
      | ../target/flow-frontend/datepickerConnector.js 8.38 KiB [built]
      | ../target/flow-frontend/dndConnector-es6.js 28 bytes [built]
      | ../target/flow-frontend/field-highlighter/theme/lumo/vaadin-field-highlighter.js 354 bytes [built]
      | ../target/flow-frontend/flow-component-renderer.js 4.33 KiB [built]
      | ../target/flow-frontend/gridConnector.js 41.1 KiB [built]
      | ../target/flow-frontend/lit-renderer.ts 1.5 KiB [built]
      | ../target/flow-frontend/lumo-includes.ts 276 bytes [built]
      | ../target/flow-frontend/multiselectComboBoxConnector.js 7.59 KiB [built]
      | ../target/flow-frontend/vaadin-grid-flow-selection-column.js 3.9 KiB [built]
      |     + 19 hidden modules
    + 316 hidden modules

ERROR in ../node_modules/.pnpm/multiselect-combo-box@2.4.2/node_modules/multiselect-combo-box/src/multiselect-combo-box.js
Module not found: Error: Can't resolve '@vaadin/vaadin-combo-box/src/vaadin-combo-box-placeholder.js' in 'C:\Users\thomas\new_workspace\test\node_modules\.pnpm\multiselect-combo-box@2.4.2\node_modules\multiselect-combo-box\src'
 @ ../node_modules/.pnpm/multiselect-combo-box@2.4.2/node_modules/multiselect-combo-box/src/multiselect-combo-box.js 6:0-97 371:26-45 455:39-58
 @ ../node_modules/.pnpm/multiselect-combo-box@2.4.2/node_modules/multiselect-combo-box/theme/lumo/multiselect-combo-box.js
 @ ../target/frontend/generated-flow-imports.js
 @ ../target/index.ts
 @ ./generated/vaadin.ts
Child HtmlWebpackCompiler:
                          Asset      Size  Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  4.39 KiB       0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [0] ../node_modules/.pnpm/html-webpack-plugin@4.5.1_webpack@4.46.0/node_modules/html-webpack-plugin/lib/loader.js!./index.html 823 bytes {0} [built]
<i> [build-status] 1 error and 0 warnings were reported.
<i> [build-status] : Failed to compile.
	at org.zeroturnaround.exec.InvalidExitUtil.checkExit(InvalidExitUtil.java:27)
	at org.zeroturnaround.exec.WaitForProcess.call(WaitForProcess.java:114)
	at org.zeroturnaround.exec.ProcessExecutor.waitFor(ProcessExecutor.java:1076)
	at org.zeroturnaround.exec.ProcessExecutor.execute(ProcessExecutor.java:906)
	at com.vaadin.flow.plugin.base.BuildFrontendUtil.runFrontendBuildTool(BuildFrontendUtil.java:431)
	... 25 more
mrgreywater commented

The problem is documented here: gatanaso/multiselect-combo-box#105 (comment)

This line: https://github.com/gatanaso/multiselect-combo-box/blob/master/src/multiselect-combo-box.js#L6 needs to be replaced with

import {ComboBoxPlaceholder} from '@vaadin/combo-box/src/vaadin-combo-box-placeholder.js';

Since it's published as npm module, it's kinda difficult to hotfix yourself.

McPringle commented

Nice! Have you tested it locally? Maybe you can create a PR for @gatanaso to merge? If you live in Europe, I'll buy you a 🍺!

arenk commented

I've tried fixing that locally a couple days ago and the error above didn't show up anymore. However, the behavior of the MultiselectComboBox was weird (e.g. no items showing).

Given a comment in the component discussion section Web-components have changed a lot in that 22 to reduce the tight coupling with polymer, improve typescript support and accessibility. and because I don't really depend on the MultiselectComboBox I decided not to follow up on this.

-> Could be a fault on my side, but would assume this fix is not sufficient.

mrgreywater commented

I think I was a little hasty. It compiles and runs with the updated path, but as @arenk said, it doesn't show any elements. Maybe I'll go and fix it later. My primary goal was to get everything to run at all with the new vaadin version at all.

thomaskiesl commented

@mrgreywater It is such a nice component! It would be great if you can have a look on it! Thanks in advance! :)

  • 👍3
SebastianDietrich commented

Goran mentioned that https://github.com/vaadin-component-factory/multiple-select might be an alternative...

mrgreywater commented

@SebastianDietrich multiple-select also doesn't show the item list.

mvysny commented

You're right, multiple-select doesn't work for me with Vaadin 22. Filed a bug ticket: vaadin-component-factory/multiple-select#10

mvysny commented

@stefanuebe mentioned a workaround at https://vaadin.com/directory/component/multiselect-combo-box/discussions . Quoting:

Update/place the webpack.config.js with the following content to make it -work- compile:

const merge = require('webpack-merge');
const flowDefaults = require('./webpack.generated.js');

const mergedConfig = merge(flowDefaults);
mergedConfig.resolve.alias['@vaadin/vaadin-combo-box/src/vaadin-combo-box-placeholder.js'] = '@vaadin/combo-box/src/vaadin-combo-box-placeholder.js';
module.exports = mergedConfig;

Unfortunately doesn't work for me:

  ERROR in ../build/flow-frontend/comboBoxConnector.js
  Module not found: Error: Can't resolve '@vaadin/vaadin-combo-box/src/vaadin-combo-box-placeholder.js' in '/home/mavi/workspaces/n2n/main/n2n-ui/build/flow-frontend'
   @ ../build/flow-frontend/comboBoxConnector.js 3:0-99 366:36-55
   @ ../build/frontend/generated-flow-imports.js
   @ ../build/index.ts
   @ ./generated/vaadin.ts
thomaskiesl commented

@mvysny The workaround only helped me to compile the component, but unfortunately the component does not work correctly. Only the combobox is shown but nothing happens by clicking on the component/arrow.

  • 👍1
urkl commented

It would be really great to have this great component on the road with latest Vaadin versions.

ttsanton commented

Dropping in to also confirm that the workaround only helps to compile but not actually have the component usable. The combobox does not load in any of the items (you can't see anything in the dropdown) and you can't select anything.

I know it's been on the roadmap for a long time now - as far back as 2015 - but it's clear that this is an important add-on for lots of users. If there's any way this could be brought in officially, it would save a lot of us some headache.

  • 👍1
osenbg commented

Without a working solution it is unlikely that V22/23 will be usable by us ....

  • 👍1
urkl commented

I am sure that Goran will update this component.

  • 👍1
osenbg commented

Very, very good news at the beginning of the week.
Waiting for a new release

arenk commented

I've been playing around a bit with the flow part. In fact, two changes were sufficient to add (preliminary) Vaadin 22 support:

Background: The updated underlying multiselect-combo-box component does not call the initDataConnector() in MultiSelectComboBox anymore. Obviously, this issue #46 won't be fixed anymore after applying the changes described above.

There might still be other issues...

  • 👍1
arenk commented

Another option might be to add the following line at the end of the constructor in MultiSelectComboBox.java instead of reverting the changes mentioned above in multiselectComboBoxConnector.js

UI.getCurrent().getPage().executeJs("").then(result -> initDataConnector());

This should make sure that the data connector is only initialized after the DOM tree is updated / component is loaded.
Vaadin documentation, Executing JavaScript in the Browser

The script is executed after the DOM tree has been updated based on server-side changes. [...]. Notice that the script is executed asynchronously, so you cannot directly pass values back to the server. Instead, you can use the returned PendingJavaScriptResult instance to add a callback that is called when the result is available.

gatanaso commented

Hi everyone, I just published a new release candidate version that uses the latest web component and is compatible with Vaadin 22.

<dependency>
   <groupId>org.vaadin.gatanaso</groupId>
   <artifactId>multiselect-combo-box-flow</artifactId>
   <version>4.0.0-rc1</version>
</dependency>

Please note, there might be some quirks, but hopefully this is enough to get you unblocked.

  • 👍8
  • 🎉4
McPringle commented

Thank you very much @gatanaso! For my flow project, I can confirm that it works as expected.

  • 🎉2