Cordobo / angularx-qrcode

A fast and easy-to-use Angular QR Code Generator library with Ivy support
https://cordobo.github.io/angularx-qrcode/
MIT License
472 stars 126 forks source link

Warning on Compilation: Dependency on CommonJS 'qrcode' Module Causes Optimization Bailouts #244

Closed greg0r1 closed 6 months ago

greg0r1 commented 6 months ago

Description

During the development of our Angular project, we've encountered a warning from webpack-dev-server indicating an optimization bailout due to a dependency on the CommonJS module 'qrcode'. This warning suggests potential performance issues.

Warning Message

Here is the warning message received during compilation:

[webpack-dev-server] WARNING
C:\Users\Sevenpark\Documents\Dev\Projets\sevenbox_v2.0\frontend\node_modules\angularx-qrcode\fesm2022\angularx-qrcode.mjs depends on 'qrcode'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: [Angular guide on CommonJS dependencies](https://angular.io/guide/build#configuring-commonjs-dependencies)

Concern

According to the Angular optimization best practices, reliance on CommonJS modules can significantly affect the build optimization capabilities of Angular applications, potentially resulting in larger bundle sizes and slower application boot times.

Suggested Solutions

  1. Migrate qrcode to an ES Module: Is there a possibility to switch to an ES module version of qrcode? This could help mitigate the issue and enhance tree-shaking and module optimization capabilities.

  2. Documentation Update: If migrating the module isn't immediately feasible, could there be documentation provided on how to handle or silence this warning effectively for users who may face similar issues?

Additional Information

Thank you for looking into this issue. We appreciate your efforts in maintaining this library and hope to see a resolution that could help enhance the performance for all Angular developers using angularx-qrcode.

Cordobo commented 6 months ago

Hello @greg0r1

Thank you for contributing to this community by opening an issue.

Unfortunately, I cannot fix (or convert) the underlying lib. You should raise an issue at the node-qrcode github page, so the author knows about the problem your facing.

Thanks again and good luck!

amazing4u commented 4 months ago

@greg0r1 If you want to get rid of the warning, just add "qrcode" to "allowedCommonJsDependencies" array in your angular.json:

image