Angular - primeng CommonJS or AMD dependencies can cause optimization bailouts

Question

I got a little Angular app, in which I'm using PrimeNG components. Since I did the Angular 10 update I get the following Warning:

CommonJS or AMD dependencies can cause optimization bailouts.

for different PirmeNg-components.

I already tried this:

"allowedCommonJsDependencies": [
              "loadsh",
              "primeng/primeng",
              "primeicons",

This is suggested on the offical homepage

Another try I did is checking the imports like mentioned in this post

import { x } from '@auth/auth....'           // Warning
...to...
import { x } from '../auth/...'              // Warning goes away

But as I don't have any imports with "@" on the beginning I'm wondering how this warning could be fixed or suppressed?

EDIT:

Error in detail:

WARNING in 'path' depends on 'chartjs'. CommonJS or AMD dependencies can cause optimization bailouts.

@Jason Aller Can you share the exact warning message what you are seeing in your build ? — Gunjan Khanwilkar, Aug 15 '20 at 20:20
@GunjanKhanwilkar I didn't ask this question, I only edited it. You want to direct your comment to Felix. — Jason Aller, Aug 15 '20 at 22:26
@Felix Can you share the exact warning message what you are seeing in your build ? — Gunjan Khanwilkar, Aug 15 '20 at 23:01
@GunjanKhanwilkar i added a the Warning as an Edit. 'path' is the excat file of the used library — Felix Gerber, Aug 17 '20 at 09:39
@FelixGerber Then you just need to add - "allowedCommonJsDependencies": [ "loadsh", "primeng/primeng", "primeicons", "chartjs" ] Add chartjs in your existing list like above and you are good. For detailed explanation please check this answer here - https://stackoverflow.com/a/62604034/6097025 — Gunjan Khanwilkar, Aug 18 '20 at 17:28

score 7 · Accepted Answer · edited Dec 23 '20 at 10:21

7

In angular.json add

 "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": ["chart.js"],

edited Dec 23 '20 at 10:21

Abhishek Patil

1,373
3
30
62

answered Dec 23 '20 at 09:37

akhilreddy

272
3
6

It should be "chartjs", not "chart.js". If Jquery, it's also "jquery" not "jQuery.js" or "JQuery". – jessewolfe Oct 20 '22 at 15:49
Not a fix, just hides the warning. Anyone know how to fix this? – Brian Reinhold May 22 '23 at 09:01

Gunjan Khanwilkar · Answer 2 · 2021-01-22T16:35:32.960

you just need to add -

    "allowedCommonJsDependencies": [ 
    "loadsh", 
    "primeng/primeng", 
    "primeicons", 
    "chartjs", 
    ---etc--- all the CommonJs dependency goes here to suppress warning!    
]

Just Add

chartjs

in your existing list like above and you are good. For detailed explanation please check this answer here - https://stackoverflow.com/a/63430362/6097025

Note that this is just a workaround to suppress warnings! If you want to completely fix this then you need to import ES-6 modules for your dependencies and avoid CommonJs dependencies. Angular-10 onwards now it shows these warnings for build optimization.

Angular - primeng CommonJS or AMD dependencies can cause optimization bailouts

2 Answers2