question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add webpack plugin to check for duplicate npm packages

See original GitHub issue

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 https://github.com/vaadin/vaadin-rich-text-editor-flow/issues/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 🤷‍♂️

wtf-webpack

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:6
  • Comments:12 (11 by maintainers)

github_iconTop GitHub Comments

2reactions
web-padawancommented, Jun 2, 2020

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 https://github.com/vaadin/flow/issues/8448#issuecomment-635271440

2reactions
plekucommented, Jun 2, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

duplicate-package-checker-webpack-plugin - npm
Webpack plugin that warns you when multiple versions of the same package exist in a build.. Latest version: 3.0.0, last published: 5 years ......
Read more >
darrenscerri/duplicate-package-checker-webpack-plugin
Webpack plugin that warns you when a build contains multiple versions of the same package - GitHub - darrenscerri/duplicate-package-checker-webpack-plugin: ...
Read more >
Finding and fixing duplicates in webpack with Inspectpack
Identical code sources from the same package: Duplicates. No webpack plugin deduplication. Similar code files from different packages: ...
Read more >
webpack and yarn magic against duplicates in bundles
Typically installed via yarn add package-name. ... It doesn't actually (there was webpack dedup plugin in the long past, but it was removed ......
Read more >
Optimization - webpack
Tells webpack to merge chunks which contain the same modules. Setting optimization.mergeDuplicateChunks to false will disable this optimization. webpack.config.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found