Angular 17: Module used by 'node_modules/xyz' is not ESM

Question

Application runs perfectly fine with npm start, when it is built using ng build, it gives the following errors:

▲ [WARNING] Module 'amazon-quicksight-embedding-sdk' used by './dashboard.component.ts' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'qrcode' used by 'node_modules/@aws-amplify/ui-angular/fesm2020/aws-amplify-ui-angular.mjs' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'ts-access-control' used by './permission.service.ts' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'style-dictionary/lib/utils/deepExtend.js' used by 'node_modules/@aws-amplify/ui/dist/esm/theme/createTheme.mjs' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'style-dictionary/lib/utils/flattenProperties.js' used by 'node_modules/@aws-amplify/ui/dist/esm/theme/createTheme.mjs' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'lodash/kebabCase.js' used by 'node_modules/@aws-amplify/ui/dist/esm/theme/utils.mjs' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'style-dictionary/lib/utils/references/usesReference.js' used by 'node_modules/@aws-amplify/ui/dist/esm/theme/utils.mjs' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'google-libphonenumber' used by './phone.service.ts' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module '@aws-crypto/sha256-js' used by 'node_modules/@aws-amplify/auth/dist/esm/providers/cognito/apis/signOut.mjs' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'lodash/pickBy.js' used by 'node_modules/@aws-amplify/ui/dist/esm/machines/authenticator/utils.mjs' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'lodash/merge.js' used by 'node_modules/@aws-amplify/ui/dist/esm/validators/index.mjs' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

I am willing to provide more information required to fix this issue.

Answer 1

Add all your CommonJS modules (for those you are getting warning) to the list allowedCommonJsDependencies in your angular.json file as stated below.

The Angular CLI outputs warnings if it detects that your browser application depends on CommonJS modules. To disable these warnings, add the CommonJS module name to allowedCommonJsDependencies option in the build options located in angular.json file.

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "amazon-quicksight-embedding-sdk",
        "@aws-crypto/sha256-js",
        "qrcode",
        "ts-access-control",
        "lodash/kebabCase.js",
        ....... and the list goes on
     ]
     …
   }
   …
}

Source: https://angular.io/guide/build#configuring-commonjs-dependencies