Webpackで作ったライブラリーで○○is not constructorエラーが出る原因と解決方法

この記事では、Webpackで作ったライブラリーを使おうとしたときに、○○is not constructorというエラーが出る原因と解決方法について説明します。

このエラーは、Webpackのビルド設定におけるoutput.library.typeの値に関係しています。output.library.typeとは何か、どう指定すればいいのか、そして指定しないとどうなるのかについて詳しく解説します。

output.library.typeとは

output.library.typeとは、Webpackのビルド設定でoutputオブジェクトの中にあるプロパティの1つです。

このプロパティは、ライブラリーがどのような形式で出力されるかを制御するものです。たとえば、ライブラリーをCommonJS形式で出力したい場合は、output.library.typeにcommonjsを指定します。以下は、webpack.config.jsファイルの一部です。

module.exports = {
  // 省略
  output: {
    // 省略
    library: {
        name: "ライブラリーの名前",
        type: "commonjs"
    }
  },
  // 省略
};

output.library.typeには、他にもさまざまな値があります。詳しくは公式ドキュメントを参照してください。

なお、output.libraryTargetでも同様に設定できますが、こちらはすでに非推奨になっているためoutput.library.typeを使用しましょう。

エラーが出る原因

では、なぜoutput.library.typeを指定しないとエラーが出るのでしょうか。

それは、Webpackがデフォルトではライブラリーとしての使用を意図していないコードを出力するためです。変数名がminify化されてしまったり、コードが即時実行関数に囲まれてしまったりします。

そのため、ただ読み込むだけで動作するライブラリーなら問題ありませんが、外部のコードからライブラリーの関数やクラスを呼び出したい場合には、エラーが発生します。

解決策

解決策は単純です。output.library.typeを指定しましょう。私の場合はブラウザーとNode.jsの両方に対応させたかったのでumdを指定しました。

まとめ

この記事では、Webpackで作ったライブラリーで○○is not constructorエラーが出る原因と解決方法について解説しました。もちろん、今回解説したoutput.library.typeだけが原因とは限りませんが、私の場合はこれで解決したので記事にしました。皆さんのお役に立てれば幸いです。