【Tips】Typescript＋Webpackで'Critical dependency: the request of a dependency is an expression'が発生した場合の対処法

はじめに

記事タイトルのエラーの対処方法を見つけるのに苦労したので記録しておく。
ちなみに、'Critical dependency: the request of a dependency is an expression'のエラーは、requireに変数を渡した場合に発生するWarningだ。Warningなのでeslintがエラーになって止まってしまうということはないが、毎回表示されるのも面倒なので無視をしたかった。

方法① パース対象外にする

以下の通り、Webpackの設定で該当のモジュールをパース対象外にする。なお、自分の環境ではlog4jsで発生していた。

  module: {
    noParse: [/log4js/],
  },

パース時にエラーになるなら、パースなんてやめちゃえばいいじゃない、という考え。
確かにエラーは消える。でもちょっと待て。パースやめるなんてそんな乱暴でいいのか？

方法② stats.warningsFilterで無視する

ここ参照。

調べている内にdeprecatedであると書かれていたので自分では試していない。

方法③ ignoreWarningsで無視する。

↑からもリンクされているのでこれが一番正攻法のようだ。
Webpackの設定でignoreWarningsの仲間に入れる。
この方法であれば、モジュールやファイル全体ではなくて、特定のモジュールの一部のWarningだけ無視できる。
余計に無視しすぎてエラーを見逃してしまうことがなくなるので、良い感じの方法なのではなかろうか。

  ignoreWarnings: [
    {
      module: /log4js/,
      message: /Critical dependency: the request of a dependency is an expression/,
    },
  ],

これでビルドすると、Warningが消えてくれる！