Angular 17：“node_modules/xyz”使用的模块不是 ESM

Question

应用程序使用

npm start

运行得很好，当使用

ng build

构建时，它会出现以下错误：

▲ [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


▲ [WARNING] Unable to locate stylesheet: /assets/fonts/inter.css


▲ [WARNING] 6 rules skipped due to selector errors:
  .amplify-accordion__item:where() -> Empty sub-selector
  .amplify-accordion__item:where() -> Empty sub-selector
  0% -> Unmatched selector: %
  50% -> Unmatched selector: %
  0% -> Unmatched selector: %
  50% -> Unmatched selector: %

我愿意提供解决此问题所需的更多信息。

Answer 1

如果 Angular CLI 检测到您的浏览器应用程序依赖于 CommonJS 模块，则会输出警告。要禁用这些警告，请将 CommonJS 模块名称添加到位于 angular.json 文件中的构建选项中的 allowedCommonJsDependencies 选项中。

"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
     ]
     …
   }
   …
}

来源：https://angular.io/guide/build#configuring-commonjs-dependency