Angularで「Warning: 〇〇 depends on ××. CommonJS or AMD dependencies can cause optimization bailouts.」

2024年6月4日

今回はAngularでng sなどを行ったときに下記のようなwarningが起きたときの対処法についてご紹介いたします。

Warning: /test(パス) depends on 'モジュール名'. CommonJS or AMD dependencies can cause optimization bailouts.

1	Warning: /test(パス) depends on 'モジュール名'. CommonJS or AMD dependencies can cause optimization bailouts.

Angularのバージョンは14.2.12で、Node.jsのバージョンは14.21.3です。
Dockerを使った仮想環境上で動かしております。

Angularで「Warning: 〇〇 depends on ××. CommonJS or AMD dependencies can cause optimization bailouts.」

結論から言うと、angular.jsonのallowedCommonJsDependenciesにwarningが出たモジュールを記述すればng s時にwarningが出なくなります。

例えば私の場合、file-saverというモジュールに関してこのwarningが出て、下記のような警告が出ました。

Warning: /test(パス) depends on 'file-saver'. CommonJS or AMD dependencies can cause optimization bailouts.

1	Warning: /test(パス) depends on 'file-saver'. CommonJS or AMD dependencies can cause optimization bailouts.

この場合、angular.jsonのoptionsのallowedCommonJsDependenciesに「file-saver」を追加しましょう。
これでひとまずCommonJSに関するエラーは出なくなります。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "optamo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "options": {
            "allowedCommonJsDependencies": [
              "file-saver"
           ]
          }
        }
      }
    }
  }
}