Add webpack plugin to check for duplicate npm packages

[web-padawan]

Problem

As a developer, I want to fail the build on webpack stage if the bundle contains duplicate web components that would crash my app in runtime, see vaadin/vaadin-rich-text-editor-flow#99

Proposed solution

Use https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin

Currently it is possible with the following custom config:

const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');

module.exports = merge(flowDefaults, {
  plugins: [
    new DuplicatePackageCheckerPlugin({
      // Also show module that is requiring each duplicate package (default: false)
      verbose: true,
      // Emit errors instead of warnings (default: false)
      emitError: true,
      // Show help message if duplicate packages are found (default: true)
      showHelp: true,
      // Warn also if major versions differ (default: true)
      strict: true
    })
  ]
});

Example output

Running webpack to compile frontend resources. This may take a moment, please stand by...
ERROR in @vaadin/vaadin-button
  Multiple versions of @vaadin/vaadin-button found:
    2.3.0 /Users/sergey/vaadin-java/bakery-app-starter-flow-spring/~/@vaadin/vaadin-app-layout/~/@vaadin/vaadin-button from /Users/sergey/vaadin-java/bakery-app-starter-flow-spring/~/@vaadin/vaadin-app-layout/src/vaadin-drawer-toggle.js
    2.4.0-alpha1 /Users/sergey/vaadin-java/bakery-app-starter-flow-spring/~/@vaadin/vaadin-button from ./src/components/search-bar.js
Started webpack-dev-server. Time: 94584627ms

Acceptance criteria

When webpack build fails on duplicate versions, the process terminates. Currently, with custom config shown above, the server still starts like nothing happened 🤷‍♂️

[web-padawan]

Note, it looks like the plugin might need some tweaks when using pnpm to install dependencies.
See darrenscerri/duplicate-package-checker-webpack-plugin#24

[pleku]

If the Vaadin version is 16+ (flow 3.1+) the server is still started due to the parallel frontend build to the server startup.

It would be more straight forward to get this to 14 as it doesn't have the parallel build (yet) but it we should still fix this so that the duplicate error message is also visible in a meaningful way in the browser. Not sure if we can terminate the server run time nicely if the webpack build fails.

The easiest thing would be to include this now to the V14 version starters.

[pleku]

It seems like the ^ plugin is not getting pnpm support any time soon, but if pnpm works properly (mentioned recent regressions causing duplicates) and #8446 is done we would not need this plugin at all for pnpm.

[web-padawan]

Submitted an example PR to Bakery v14 branch: vaadin/bakery-app-starter-flow-spring#1074

[manolo]

BTW, there is a new script in platform build that checks that we do not deliver a release with the problem described here. vaadin/platform#1364

[web-padawan]

I know about the platform build, but the problem might still happen in following cases:

1. versions.json is not in use, which is the case for Flow components development setup

2. transitive dependencies having an incorrect dist-tag, see Changing vaadin to vaadin-core dependency can break the application with 14.2 #8448 (comment)

[jcgueriaud1]

I've got the same after upgrading a vaadin project 14.1 to 14.3.0.alpha1.

With this configuration I've got the explanation:
2020-06-05 15:53:46.023 INFO 94148 --- [ main] dev-webpack : Running webpack to compile frontend resources. This may take a moment, please stand by...
2020-06-05 15:53:49.740 ERROR 94148 --- [ webpack] dev-webpack : ERROR in @vaadin/vaadin-combo-box
2020-06-05 15:53:49.797 ERROR 94148 --- [ webpack] dev-webpack : Multiple versions of @vaadin/vaadin-combo-box found:
2020-06-05 15:53:49.797 ERROR 94148 --- [ webpack] dev-webpack : 5.1.1 ../multiselect-combo-box//@vaadin/vaadin-combo-box from ../multiselect-combo-box//@vaadin/vaadin-combo-box/src/vaadin-combo-box-light.js
2020-06-05 15:53:49.798 ERROR 94148 --- [ webpack] dev-webpack : 5.2.0-alpha1 ...~/@vaadin/vaadin-combo-box from /Users/jean-...@vaadin/vaadin-combo-box/src/vaadin-combo-box.js

So 👍 for this tool. (I don't know how to solve it but I know that the error comes from multiselect-combo-box).

[web-padawan]

I don't know how to solve it but I know that the error comes from multiselect-combo-box

If you are using pnpm then it should override version to the one from versions.json

Otherwise the only thing we can do is to ask multiselect-combo-box maintainer to bump a new alpha version with a corresponding alpha dependency bump for vaadin-combo-box.

[jcgueriaud1]

I've opened an issue for the add-on.

PNPM fixed this issue. Thanks for the suggestion.

[Djaler]

PNPM fixed this issue. Thanks for the suggestion.

@jcgueriaud1 which issue do you talk about?

[jcgueriaud1]

@Djaler This issue: gatanaso/multiselect-combo-box-flow#59

Thanks to the current ticket, I've got more explanation about the DuplicatePackage error (a conflict between vaadin-combobox and the third party multiselect combobox). Then I tried to change from npm to pnpm and the duplicate error was managed by pnpm.

[mvysny]

Because of #7472 I can't see the webpack error message at all, therefore I have no idea what's going wrong or which package is duplicate. It's better if I remove DuplicatePackageCheckerPlugin since at least I'll get a more informative error message at runtime!